javascript - How to detect when a mouse moves away from the element - Stack Overflow

admin管理员组

文章数量:1400007

mousemove is fired when mouse is moving over an element. How can I detect when the mouse is moving outside of an element? In other words, anywhere on the page besides the div in the snippet. Not when the mouse leaves but fires whenever the mouse is moving outside of the element.

const div = document.querySelector('div');

div.addEventListener('mousemove', function() {
    document.body.classList.add('mouse-moving');
 });

div {
  height: 200px;
  width: 300px;
  background-color: red;
}
.mouse-moving {
  background-color: green;
}

<div></div>

mousemove is fired when mouse is moving over an element. How can I detect when the mouse is moving outside of an element? In other words, anywhere on the page besides the div in the snippet. Not when the mouse leaves but fires whenever the mouse is moving outside of the element.

const div = document.querySelector('div');

div.addEventListener('mousemove', function() {
    document.body.classList.add('mouse-moving');
 });

div {
  height: 200px;
  width: 300px;
  background-color: red;
}
.mouse-moving {
  background-color: green;
}

<div></div>

• javascript

Share Improve this question Follow asked Apr 24, 2018 at 2:16 RickyRicky 23911 gold badge44 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can use onmouseover and onmouseout

const div = document.querySelector('div');

div.onmouseover = ()=> document.body.classList.add('mouse-moving');

 div.onmouseout = ()=> document.body.classList.remove('mouse-moving');

div {
  height: 200px;
  width: 300px;
  background-color: red;
}
.mouse-moving {
  background-color: green;
}

<div></div>

You can add the mousemove event listener to the document and check whether the event target is your div or not:

const div = document.querySelector('div');

document.addEventListener('mousemove', function(e) {
    if(e.target !== div) {
        div.textContent = "outside the div (" + e.clientX + ", " + e.clientY + ")";
    } else {
        div.textContent = "inside the div (" + e.clientX + ", " + e.clientY + ")";
    }
});

div {
  height: 200px;
  width: 300px;
  background-color: red;
}

<div></div>

Note: If the div contain other element, the test won't work. You'll have to check if one of the target's ancestors is your div:

document.addEventListener('mousemove', function(e) {
    var elm;
    for(elm = e.target; elm && elm !== div; elm = elm.parentElement)
        ;

    if(elm === div) {
        // inside div
    } else {
        // outside div
    }
});

const div = document.querySelector('div'),
      result = document.querySelector("#result");

document.addEventListener('mousemove', function(e) {
    var elm;
    for(elm = e.target; elm && elm !== div; elm = elm.parentElement)
        ;

    if(elm === div) {
        result.textContent = "inside the div (" + e.clientX + ", " + e.clientY + ")";
    } else {
        result.textContent = "outside the div (" + e.clientX + ", " + e.clientY + ")";
    }
});

div {
  height: 200px;
  width: 300px;
  background-color: red;
}

div > div {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}

<span id="result"></span>
<div>
  <div></div>
  <div></div>
</div>

Also, if the div's children are outside its boundary (due to some absolute positioning or something), the above method won't work, you'll have to check if the mouse coordinates are inside the div's bounding rectangle.

本文标签： javascriptHow to detect when a mouse moves away from the elementStack Overflow