jquery - 如何用 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 的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 链接