Question

我有一个在我点击文档时运行的监听器。

document.addEventListener('click', print);

function print(element)
{  
  doSomething();
}

它创建了div id = panel，我打印了一些信息。

当我运行打印功能时，我想检测我是否在div＃面板外面点击（当我第二次点击时面板存在）。

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

如何检测我何时点击div＃panel？

Answer 1

您可以查看jQuery的target事件click，该事件属于哪个元素：

$(document).click(function(e) {
    var target = $(e.target);

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

Answer 2

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

function handler(event) {
    if (event.target == document.getElementById("panel")) {    
        // Do stuff
    }
}

document.addEventListener('click', handler);

编辑：因为你自己的代码片段不使用jQuery，我故意给出了vanilla JS答案。但jQuery不会改变任何东西，因为它的事件处理API几乎只是JS的一个薄包装。

Answer 3

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

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,console,output

Answer 4

另一种方法，仅使用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;
        }

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

4 个答案: