如何检测鼠标光标是否超出元素

How to detect if mouse cursor is out of element?

本文关键字：是否 光标 元素 鼠标 何检测 检测      更新时间：2023-09-26

我有一个监听器，当我点击文档时它就会运行。

document.addEventListener('click', print);
function print(element)
{  
  doSomething();
}

它创建了div id=面板，在那里我打印一些信息。

当我运行print函数时，我想检测我是否在div#面板之外点击了（当我第二次点击时，面板就存在了）。

我不希望使用mouseout事件监听器，因为我认为在事件点击已经触发时，使用监听器进行鼠标移动是多余的。

如何检测我点击离开div#面板的时间？

您可以检查jQuery的click事件的target，它是哪个元素：

$(document).click(function(e) {
    var target = $(e.target);
    if( !target.is("#panel") && target.closest("#panel").length === 0 ) {
        // click was not on or inside #panel
    }
});

您的事件处理程序传递的是事件对象，而不是元素。由于您正在侦听单击事件，因此该事件的类型将为MouseEvent，并且该事件对象将具有一个目标属性，您可以使用该属性来检查目标元素是否与所需元素匹配。

function handler(event) {
    if (event.target == document.getElementById("panel")) {    
        // Do stuff
    }
}
document.addEventListener('click', handler);

编辑：由于您自己的代码片段不使用jQuery，所以我特意给出了普通JS的答案。但jQuery不会改变任何事情，因为它的事件处理API几乎只是JS上的一个薄包装。

我只是使用点击中的事件。这是

var elem=document.getElementById("elem");
var rects=elem.getBoundingClientRect();//get the bounds of the element
document.addEventListener('click', print);
function print(e)
{  
 //check if click position is inside or outside target element
 if(e.pageX<= rects.left +rects.width && e.pageX>= rects.left &&  e.pageY<= rects.top +rects.height && e.pageY>= rects.top){
    console.log("Inside element");
 }   
 else{
   console.log("Outside element");
}
}

JS Bin链接：https://jsbin.com/pepilehigo/edit?html，js，控制台，输出

另一种仅使用javascript的方法是：

function print(evt) {
  if (!(evt.target.tagName == 'DIV' && evt.target.classList.contains('myDiv'))) {
    var div = document.createElement('div');
    div.classList.add('myDiv');
    div.textContent="new div";
    document.body.appendChild(div);
  }
}
window.onload = function() {
  document.addEventListener('click', print);
}
 .myDiv {
            border:1px solid green;
        }

相关文章：