如何使用jQuery識別單擊的元素？

Question

我有一個元素疊加，具有時區中的任意位置單擊某些功能：

<div id="overlay"> 
    some html and some <a href="#">links</a> 
</div> 

現在我想別的事情才發生的，如果你點擊那個區域內的鏈接：

$('#overlay').click(function() { 
if(clicked_element=="a") alert("clicked inside"); 
    else alert("you clicked a link"); 
}); 

我該如何填寫？

Answer 1

您可以使用event.target：

$('#overlay').click(function(e) { // <- note the parameter 
    alert(e.target); // <- the target 
}); 

在您的例子，它會是這樣的：

$('#overlay').click(function(e) { 
    if(e.target.nodeName == "A"){ 
     alert("clicked inside"); 
    }else{ 
     alert("you clicked a link"); 
    } 
}); 

爲了完整起見，這裏是一個天然的JavaScript解決方案：

document.getElementById("#overlay").addEventListener("click",function(e){ 
    alert(e.target); 
},false); 

如果你想找到最近的<a>的目標，你可以使用jQuery's closest()

Answer 2

$('#overlay').on('click', 'a', function() { 
    //'this' now refers to clicked link 
}); 

Answer 3

首先得到event對象：.click(function(e) {

那麼它target財產（e.target)將是你點擊的元素。爲確保您獲得鏈接，請嘗試以下操作：

var target = e.target; 
while(target && target.nodeName != "A") target = target.parentNode; 

例如，如果您在鏈接中有圖像，這將很有用。

Answer 4

試試這個

$('#overlay').click(function(e) { 
    if (e.target.nodeName === 'A') { 
     alert("Link clicked"); 
    } else { 
     alert('overlay clicked'); 
    } 
}); 

jsFiddle Link