jQuery单击父项上的事件,但查找子项(单击)元素

Question

假设我有一个父元素,其中包含许多嵌套的子元素:

<div id="p">
    <div id="c1">
        <div id="c2"></div>
        <div id="c3"></div>
    </div id="c4">
        <div id="c5"></div>
    </div>
</div>

我已经click在父母身上绑定了一个事件:

$('#p').bind('click', function() {
    alert($(this).attr('id'));
});

因为事件被分配给父元素,所以我总是看到父ID,但是,我想知道是否有任何可能的方法来找出哪些子元素被点击了？

我也不能将任何事件分配给子元素或从父div中删除事件监听器.

Answer 1

您需要将事件对象传递给函数以获取触发事件的项,event.target将为您提供源元素.

现场演示

 $('#p').bind('click', function(event) {
    alert(event.target.id);
 });

要么

现场演示

$('#p').bind('click', function(event) {
    alert($(event.target).attr('id'));
});

编辑

第一种方法event.target.id优于第二种方法$(event.target).attr('id'),性能,简单性和可读性.

Answer 2

您可以尝试以下代码.也尝试jsfiddle(演示).

$('#p').on('click', function(event) {
    alert(event.target.id);
});?

试试这个演示

第二个问题的答案是您可以将事件分配给子项并从中删除它的父项.看一下这个.

.stopPropagation(); 

防止事件冒泡DOM树,防止任何父处理程序被通知事件.阅读更多

如果您希望仅执行特定事件并且不允许触发其他事件,请使用下面的代码

event.stopImmediatePropagation()

保持其余的处理程序不被执行,并防止事件冒泡DOM树.阅读更多

我希望这能解决你的问题.如果您有任何疑问,请随时提出.谢谢