鼠标拖动绘制矩形pointer-events: none

实现图：

image.png

业务需求：

目前多张pdf由后端处理返回成图片，前端把图片展示在一个固定框里，滚动加载图片。
在页面的预览图片（多页）上面绘制一个矩形，画完立即保存，右上角出现一个删除按钮，要立即可以删除。
实现思路：
一开始的思路是使用canvas去实现，我尝试把一个透明的画布放在预览图上，但滚动的时候，透明的画布就会随着这个滚动条滚动。那么用一个透明的canvas absolute在画布上是行不通的。然后我就想那生成一个canvas的高度是整个预览图的长度吧。
但是思考了下，我们的业务场景预览图可能会有几百几千张，那么生成一个这么长的canvas好像也有点不太好。
生成canvas，可以绘制一个删除按钮，实现点击删除功能。
因为需求也只是在图片上画红框而已，那我也没必要非用canvas不可，还得研究canvas的api也挺复杂的。最后决定用js+css去绘制矩形，这样删除等操作也都很简单了。

那思路明确了，开始吧
参考了一些文章：(关键字就搜鼠标拖动画矩形)
鼠标拖动画矩阵
手把手教你用原生js实现按住鼠标拖动画框

js+css去绘制矩形实现的思路：

给一个红框初始值box，宽度是0高度是0
当鼠标按下的时候，去计算出鼠标的水平垂直坐标（这个水平垂直坐标是针对于绑定mousedown方法的这个元素）
鼠标move的时候，不停的给div设置width和height，而这个width是这么计算的：鼠标移动的e.offsetX - 鼠标按下时的初始e.offsetX。height是：鼠标移动的e.offsetY-鼠标按下时的初始e.offsetY
当鼠标松开/抬起的时候，拖动就结束了，发送新增框框的请求，然后新增接口成功后再去调用渲染红框的请求，请求里返回一个红框的id，点击删除根据id去删除。

遇到的问题

使用的offsetX和offsetY
offsetX：鼠标点击位置相对于触发事件对象的水平距离
offsetY：鼠标点击位置相对于触发事件对象的垂直距离

相对于触发事件对象，这几个字画重点。虽然我事件是绑定在img-content上的，但是当我鼠标移动过程中，触发事件的对象却有可能发生改变。也就是e.target发生了改变，那么offsetX就会不是你想要的。我们可以在控制台打印e.target去看鼠标随意移动后，值的变化。
我出现这种情况的场景有：绘制矩形，正常往下拉没问题，而鼠标缩放回去的时候，我鼠标的触发事件就变成了box本身，而不再是img-content，就会闪烁。
还有：图片上有其他的框元素，如果我鼠标拖拽到其他的框元素上，触发事件就改变，offsetX就变得不是你想要的。矩形就会绘制的不流畅。

解决办法：

给box给图片上其他的框元素加上属性 pointer-events: none;（鼠标事件拜拜，对鼠标事件Say GoodBye!!）
如果你想深度解析pointer-events可以看这篇文章https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

解决办法倒是挺简单的，但也有一些局限性。此属性把鼠标事件完全禁用了，当然也包含鼠标的样式

我对pointer-events: none的通俗理解：

pointer-events: none你可以看的到某个元素，但是你无法摸的着，点击不到，点击会穿透触发到下层的元素。none表示鼠标事件穿透该元素并且指定该元素下面的任何东西
display：none; 是你摸不着，但是你也看不见。

js设置代码：

el.style.pointerEvents = 'none'
el.style.pointerEvents = 'auto'

b49668e3db525945245d52d8662074e.png

补充知识

鼠标的按下事件mousedown的which属性，鼠标按下左键为1，中键为2，右键为3




用您的鼠标按钮之一单击此文本可返回一个数字。
  1 = 鼠标左键
  2 = 鼠标中键
  3 = 鼠标右键


注释：IE8 及更早版本不支持 which 属性。

用您的鼠标按钮之一单击此文本可返回一个数字。
1 = 鼠标左键

2 = 鼠标中键

3 = 鼠标右键

注释：IE8 及更早版本不支持 which 属性。