CODEWITHSUNDEEP
javascripthtmliframedom-events
SShah
SShah

Reputation: 1082

Javascript mousemove event listener is not working as expected

I am trying to make a particular <p> element remain visible, only when my mouse is within the <iframe> element and moving within the <iframe> element. If the mouse is outside the <iframe> element or is stationary within the <iframe> element, then it should hide the <p> element.

I am using the mousemove event listener, which after having looked at https://developer.mozilla.org/en-US/docs/Web/Events/mousemove, which defines the mousemove event as "The mousemove event is fired when a pointing device (usually a mouse) is moved while over an element.".

However if you test the code on the HTML snippet, this does not seem to be the case for me, because once my mouse moves within the <iframe> element it does make the <p>element, however it still disappears after some time the timeout triggers and hides it. Moving the mouse within the iframe element, does not seem to trigger the mousemove event again until you move the mouse outside of the iframe window and then move it back in again.

Also the mousemove event is not always being triggered when i move the mouse from outside the <iframe> element to inside the element.

Can somebody please explain to me why the mousemove event is not being triggered again when the mouse is moved within the <iframe> element and also show me how I can achieve my <p> element to only appear when the mouse is within the <iframe> element and is moving inside the element.

Have i misunderstood the definition described for the mousemove event from mozilla's documentation, found on the link above? because based on my understanding its implying that the mousemove event will be triggered when the mouse moves within the element.

Thank you very much and Merry Christmas.

function showP() {
  document.getElementById('p').classList.remove('hide');
}

function hideP() {
  document.getElementById('p').classList.add('hide');
}

var timer;

document.getElementsByClassName('iframe')[0].addEventListener('mousemove', function() {
  console.log('Entered iframe');
  clearTimeout(timer);
  showP();
  timer = setTimeout(hideP, 3000);
});
.hide {
  display: none;
}
<iframe class="iframe" src="https://test.com/" width="100px" height="100px">

</iframe>

<p id="p" class="hide">
  Showing P Tag
</p>

Upvotes: 0

Views: 1952

Answers (1)

geochanto
geochanto

Reputation: 1002

Iframes can be tricky. You can try to wrap the iframe in a div, and target that div in your JS instead:

<div class="iframe" width="100px" height="100px">
   <iframe src="https://test.com/" width="100px" height="100px">
   </iframe>
</div>

I'm pretty sure this way you can also use onmouseover and onmouseout, or any other event. You may need to add CSS:

iframe {
pointer-events: none;
}

see working codepen: https://codepen.io/geochanto/pen/wRqvqo

Upvotes: 1

Related Questions