指针事件上的鼠标移动 none div

Question

如何在指针事件 none div 上触发 mousemove 事件，我无法编辑页面的 html 只有 javascript (银行业）

<h1>title</h1>
<div class="wrapper">
  <h3>element 1</h3>
  <h3>element 2</h3>
</div>

脚本目前只触发正文作为目标而不是元素

document.body.addEventListener("mousemove", function(e) {
  console.log(e.target)
})

https://codepen.io/anon/pen/PxOMQL

Answer 1

我想这就是您要找的。一旦鼠标移动到 div 内带有 class 包装器的任何内容，它就会记录它。

let wrappers = document.getElementsByClassName("wrapper");
for ( let i = 0; i < wrappers.length; i++ ) {
    wrappers[ i ].style.pointerEvents = "auto";
    wrappers[ i ].addEventListener( "mousemove", function(e){
    console.log( e.target );
    });
}

.wrapper {
 pointer-events: none; 
}

<h1>title</h1>
<div class="wrapper">
  <h3>element 1</h3>
  <h3>element 2</h3>
</div>

编辑：您可以用 JavaScript 覆盖包装器的 CSS class 以将指针事件设置为自动，否则当鼠标事件设置为 none 在 CSS.

指针事件上的鼠标移动 none div

Mousemove on pointer-events none div

javascript

mousemove