vue3 怎么在 线条 边框上 绑定 @click事件

Question

**一个田字形 Table表,
目的: 点击某 根边线,做相应处理
问题: 怎么获取到点了哪根线呢?

思路是, 每根线 建一个透明的 div 放在 线的后面. 在这个透明的 div 上 绑定@click
但感觉很low**

Answer 1

把边线当做矩形计算出位置就好了(td.getBoundingClientRect，和边框宽度进行计算)，给table加click，获取e.clientX,e.clientY判断是否在线条范围内容~

js中getBoundingClientRect()方法详解_花花花菜的博客-CSDN博客_getboundingclientrect使用 js中getBoundingClientRect()方法详解 https://blog.csdn.net/m0_59075169/article/details/124697071