5

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

ekclone
  • 1,030
  • 2
  • 17
  • 39
  • 1
    You can not catch an event that is not fired in the first place. `pointer-events: none` means _“[t]he element is never the target of mouse events”_ (quote: MDN) – misorude Nov 20 '18 at 13:45
  • I only need to trigger a hover effect, i know about pointer-events none, i just cant overwrite the css in any way I can only write javascript – ekclone Nov 20 '18 at 13:47
  • _Triggering_ an event means something else, that does not seem to be what you want here in the first place - you seem to want to catch/handle an event. _“ i just cant overwrite the css in any way I can only write javascript”_ - doesn’t change the fact that you can not get JS to react to something that _did not even happen_ because CSS prevented it. You will need to override this CSS - maybe _via_ JavaScript (set inline style on the element), if you have no access to the actual stylesheets of the page. – misorude Nov 20 '18 at 13:51

1 Answers1

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.

BambiOurLord
  • 372
  • 5
  • 12