原生JS offsetX和offsetY引起抖动

Posted 2021-03-03 Love_night

在模仿淘宝放大镜效果时, 发现mask层一直抖动, 红色方框添加了onmousemove事件, 内部用到了offsetX 最后解决方案是给mask添加css属性: pointer-events: none; 

<div class="outer">
      <div.mask></div>
</div>

 

 

 原本我是想让outer作为参考系获得offsetX和offsetY的值, 所以把onmousemove事件响应函数添加到outer上, 可是这样做仅仅代表,事件冒泡到outer层才会执行回调函数, offsetX参考系并不是outer, 其实event.offsetX是以event.target(事件触发的节点)作为参考系的,所以把事件添加给谁都没用,参考系始终是事件触发节点,

本例中, 由于mask是红色的outer盒子的子元素,所以事件的触发节点一定是在mask,参考系始终是mask.

给mask添加css属性pointer-events: none; 可以让mask层不参与鼠标事件, 这样event.target才是outer, 参考系才可以变成outer

(pointer-events可以继承)