Question

我有一个Element叠加层，在该区域内的任何位置点击时都有一些功能：

<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

如何使用jQuery识别单击的元素？

4 个答案: