如何檢測鼠標光標是否超出元素？

Question

當我單擊文檔時，我有一個運行的偵聽器。

document.addEventListener('click', print);

function print(element)
{  
  doSomething();
}

它會創建div id = panel，在其中打印一些信息。

當我運行打印功能時，我想檢測是否在div＃panel之外單擊（該面板在我第二次單擊時存在）。

我不希望使用mouseout事件偵聽器，因為當事件單擊已經觸發時，使用偵聽器進行鼠標移動是多余的。

如何檢測我何時從div＃panel中單擊？

Answer 1

您可以檢查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
    }
});

Answer 2

您的事件處理程序將傳遞一個事件對象，而不是元素。 由於您正在監聽click事件，因此該事件的類型為MouseEvent，並且該事件對象將具有target屬性，您可以使用該屬性檢查目標元素是否與所需元素匹配。

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

document.addEventListener('click', handler);

編輯：由於您自己的代碼片段不使用jQuery，所以我故意給了香草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; }