鼠标移至指针事件无div

Question

How do i trigger the mousemove event on a pointer-events none div, I can't edit the html of the page only the javascript (banking)

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

the script currently only triggers the body as the target and not the element

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

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

Answer 1

I think this is what you're looking for. Once mouse moves over anything that is inside div with class wrapper, it will log it.

 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> 

EDIT: You could overwrite the CSS class of wrapper with JavaScript to set pointer-events to auto, otherwise mouse events will not work while it is set to none in CSS.