cad底图模拟点击事件

有个需求是在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的移动，点击事件也是同理。

1 鼠标事件的种类

鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些：

• click：按下鼠标（通常是按下主按钮）时触发。
• dblclick：在同一个元素上双击鼠标时触发。
• mousedown：按下鼠标键时触发。
• mouseup：释放按下的鼠标键时触发。
• mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
• mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。
• mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。
• mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。
• mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。
• contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。
• wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。

click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。

dblclick事件则会在mousedown、mouseup、click之后触发。

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

2 MouseEvent 接口概述

MouseEvent接口代表了鼠标相关的事件，单击（click）、双击（dblclick）、松开鼠标键（mouseup）、按下鼠标键（mousedown）等动作，所产生的事件对象都是MouseEvent实例。此外，滚轮事件和拖拉事件也是MouseEvent实例。

MouseEvent接口继承了Event接口，所以拥有Event的所有属性和方法。它还有自己的属性和方法。

浏览器原生提供一个MouseEvent构造函数，用于新建一个MouseEvent实例：

let event = new MouseEvent(type, options);

MouseEvent构造函数接受两个参数。第一个参数是字符串，表示事件名称；第二个参数是一个事件配置对象，该参数可选。除了Event接口的实例配置属性，该对象可以配置以下属性，所有属性都是可选的：

• screenX：数值，鼠标相对于屏幕的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
• screenY：数值，鼠标相对于屏幕的垂直位置（单位像素），其他与screenX相同。
• clientX：数值，鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
• clientY：数值，鼠标相对于程序窗口的垂直位置（单位像素），其他与clientX相同。
• ctrlKey：布尔值，是否同时按下了 Ctrl 键，默认值为false。
• shiftKey：布尔值，是否同时按下了 Shift 键，默认值为false。
• altKey：布尔值，是否同时按下 Alt 键，默认值为false。
• metaKey：布尔值，是否同时按下 Meta 键，默认值为false。
• button：数值，表示按下了哪一个鼠标按键，默认值为0，表示按下主键（通常是鼠标的左键）或者当前事件没有定义这个属性；1表示按下辅助键（通常是鼠标的中间键），2表示按下次要键（通常是鼠标的右键）。
• buttons：数值，表示按下了鼠标的哪些键，是一个三个比特位的二进制值，默认为0（没有按下任何键）。1（二进制001）表示按下主键（通常是左键），2（二进制010）表示按下次要键（通常是右键），4（二进制100）表示按下辅助键（通常是中间键）。因此，如果返回3（二进制011）就表示同时按下了左键和右键。
• relatedTarget：节点对象，表示事件的相关节点，默认为null。mouseenter和mouseover事件时，表示鼠标刚刚离开的那个元素节点；mouseout和mouseleave事件时，表示鼠标正在进入的那个元素节点。