原生JS offsetX和offsetY引起抖动
2021-03-29 22:27
标签：sem inf mic col point 放大镜 inter 事件 outer 在模仿淘宝放大镜效果时, 发现mask层一直抖动, 红色方框添加了onmousemove事件, 内部用到了offsetX 最后解决方案是给mask添加css属性: pointer-event: none; 原本我是想让outer作为参考系获得offsetX和offsetY的值, 所以把onmousemove事件响应函数添加到outer上, 可是这样做仅仅代表,事件冒泡到outer层才会执行回调函数, offsetX参考系并不是outer, 其实event.offsetX是以event.target(事件触发的节点)作为参考系的,所以把事件添加给谁都没用,参考系始终是事件触发节点, 本例中, 由于mask是红色的outer盒子的子元素,所以事件的触发节点一定是在mask,参考系始终是mask. 给mask添加css属性pointer-event: none; 可以让mask层不参与鼠标事件, 这样event.target才是outer, 参考系才可以变成outer 原生JS offsetX和offsetY引起抖动 标签：sem inf mic col point 放大镜 inter 事件 outer 原文地址：https://www.cnblogs.com/jx-z/p/12602682.htmldiv class="outer">
div.mask>div>
div>
文章标题：原生JS offsetX和offsetY引起抖动
文章链接：http://soscw.com/index.php/essay/69714.html