鼠标拖动绘制矩形，使用到pointer-events: none属性

实现图：

业务需求：

目前多张pdf由后端处理返回成图片，前端把图片展示在一个固定框里，滚动加载图片。
点击按钮进入到绘制蓝框的模式，在页面的预览图片（多页）上面绘制一个矩形，画完立即保存，右上角会出现一个删除按钮，点击删除可以立即删除。

实现思路：

一开始的思路是使用canvas去实现，我尝试把一个透明的画布放在预览图上，但滚动的时候，透明的画布就会随着这个滚动条滚动。那么用一个透明的canvas absolute在画布上是行不通的。然后我就想那生成一个canvas的高度是整个预览图的长度吧。

但是思考了下，我们的业务场景预览图可能会有几百几千张，那么生成一个这么长的canvas好像也有点不太好。

就算生成了canvas，也可以绘制一个删除按钮，实现点击删除等等功能，但还需要看canvas的api文档，优化问题上也会有一定的技术难度。

因为需求也只是在图片上画红框而已，那我也没必要非用canvas不可，还得研究canvas的api也挺复杂的。最后决定用js+css去绘制矩形，这样删除等操作也都很简单了。

那思路明确了，Let's do it. 参考了一些文章：(关键字就搜鼠标拖动画矩形) 鼠标拖动画矩阵手把手教你用原生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可以看这篇文章www.zhangxinxu.com/wordpress/2...

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

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

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

js设置代码：

ini 复制代码

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

补充知识

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

xml 复制代码

<!DOCTYPE html>
<html>
<body>
<div onmousedown="WhichButton(event)">用您的鼠标按钮之一单击此文本可返回一个数字。
  <p>1 = 鼠标左键</p>
  <p>2 = 鼠标中键</p>
  <p>3 = 鼠标右键</p>
</div>

<p><b>注释：</b>IE8 及更早版本不支持 which 属性。</p>

<script>
function WhichButton(event) {
  alert("You pressed button: " + event.which)
}
</script>

</body>
</html>

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

2 = 鼠标中键

3 = 鼠标右键

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