javascript - 如何确定鼠标指针是否越过javascript中的元素

Question

可以为元素定义鼠标悬停事件，以便您知道鼠标指针当前位于该元素的某个位置。如何确定鼠标指针是否离开该元素区域？

Answer 1

Mouseover和mouseout以及 jQuery 让事情变得简单：

$("img").mouseover(function(){
   alert('your message');
});

Answer 2

考虑到你可以使用jQuery. mouseoverand事件mouseout可以工作，但我建议您改用mouseenterandmouseleave事件，因为如果您有子元素， mouseoverandmouseout事件可能会触发多次。element

$("#my-element")
    .mousenter(function(){
        console.log('enter');
    })
    .mouseleave(function(){
        console.log('leave');
    });

但是，如果您不想使用jQuery，可以在 vanilla JS 中使用。

document.getElementById('my-element').addEventListener('mouseover' function (e) {
    console.log('over');
});

Answer 3

use onmousemove, onmouseover and onmouseout events...
onmousemove - The event occurs when the pointer is moving while it is over an element
onmouseover - The event occurs when the pointer is moved onto an element
onmouseout - The event occurs when a user moves the mouse pointer out of an element