在pointer-events为none的div上进行鼠标移动

Question

我该如何在pointer-events为none的div上触发mousemove事件？我无法编辑页面的html，只能使用javascript（银行业）。

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

当前脚本仅将body作为目标而不是元素

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

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

- ekclone

---

你无法捕获一个从未被触发的事件。pointer-events: none 的意思是“该元素永远不会成为鼠标事件的目标”（引用：MDN）。 - misorude

我只需要触发悬停效果，我知道pointer-events none，但我无法以任何方式覆盖CSS，我只能编写JavaScript。 - ekclone

“触发”事件意味着另外一件事，这似乎不是你想要的 - 你似乎想要捕获/处理一个事件。“我只能编写JavaScript，无法以任何方式覆盖CSS”的事实并没有改变，因为CSS阻止了它，所以你无法让JS对某些根本没有发生的事情做出反应。如果你无法访问页面的实际样式表，那么你需要覆盖这个CSS - 可能通过JavaScript（在元素上设置内联样式）。 - misorude

Answer 1

我认为这就是你要找的。一旦鼠标移动到包含类名为wrapper的div内的任何内容上，它就会被记录。

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覆盖wrapper的CSS类，将pointer-events设置为auto，否则在CSS中将其设置为none时，鼠标事件将无法正常工作。

- BambiOurLord

---

正如Joe所说，该页面具有pointer-events: none属性，我无法更改它。 - ekclone

我编辑了我的回答，希望现在对你有所帮助。 - BambiOurLord