js完成鼠标点击事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了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的移动，点击事件也是同理。

js完成鼠标点击事件

需要注意的是，在实验过程中，比较难绕过来的一个弯是，我在页面左上角放了一个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

js完成鼠标点击事件