js完成鼠标点击事件

有个需求是在canvas上画多个可操作的矩形，每个矩形对应一个表单，同时需要校验。在校验到某个表单不通过的时候，需要选中对应的矩形。画图是使用的fabric.js，因为最开始没找到fabric选中图形的方法，就准备用虚拟点击去实现，百度之后实现了点击事件，那就记下来方便以后再需要的时候用吧。

步骤只有三步，或者两步：new一个MounseEvent对象；获取目标节点；向目标节点发送事件对象

1、生成事件，这里是实现了一个拖动canvas的场景，所以弄了鼠标按下和鼠标移动两个事件(以下参数非必要，能实现功能即可，详细配置可参考MDN，文末有链接)

        

// 鼠标按下事件
const eventdown = new MouseEvent("mousedown", {
    button: 0,
    clientX: 1058,
    clientY: 289,
    bubbles: true,
    buttons: 1
})
// 鼠标移动事件
const eventmove = new MouseEvent("mousemove", {
    button: 0,
    clientX: 1000,
    clientY: 240,
    bubbles: true,
    buttons: 1
})

2、获取节点；3、发送事件

const canvas = document.getElementsByClassName("canvasname")[0];
canvas.dispatchEvent(eventdown);
canvas.dispatchEvent(eventmove);

这样就完成了canvas的移动，点击事件也是同理。

 

需要注意的是，在实验过程中，比较难绕过来的一个弯是，我在页面左上角放了一个button按钮并添加的点击事件函数输出事件对象，但是但我把new MouseEvent生成的事件对象发送到body的(0,0)位置的时候，并不能触发button的点击事件。后来发现JS点击事件跟我们操作鼠标不一样，并不是点击哪个坐标就会触发那个坐标的节点的事件，而应该是发送事件的目标节点在该坐标的事件(比如我点击一个canvas，在canvas元素内，坐标clientX是1000，clientY是300的地方有一个可选中对象，那么是可以激活它的。PS：坐标在元素外的场景没试过)。

逻辑应该是在点击事件发生后，从文档最上层开始捕获，到body找到目标事件，之后处理事件，然后向上冒泡，并没有经过button，所以尽管button在(0,0)的位置，但是它的点击事件并没有没触发。但是往button发送点击事件的时候，是可以触发body的事件的，这一点也可以证明以上猜想。

事件构造器配置参数可查看以下网址：

MouseEvent() - Web API 接口参考 | MDN

 

Event() - Web API 接口参考 | MDN

UIEvent() - Web API 接口参考 | MDN

本人在编程方面尚未入门，文章纯属个人备忘之用，发在网上只是希望能够尽量帮到他人，如有错误还请指正，看到消息或评论后会改正。另外，消息评论查看不及时，还望见谅。