父级上的jQuery单击事件，但找到子（单击）元素

Posted 2023-05-09

【中文标题】父级上的jQuery单击事件，但找到子（单击）元素

【英文标题】：jQuery click event on parent, but finding the child (clicked) element

【发布时间】：2012-09-27 08:03:18

【问题描述】：

假设我有一个父元素，它内部有很多嵌套的子元素：

<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 中删除事件侦听器。

【参考方案1】：

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

Live Demo

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

或

Live Demo

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

编辑

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

【讨论】：

谢谢，它有效！ :) ...我应该等待接受您的回答！

作为记录，$(event.target).attr('id') 是 event.target.id 的慢得多的版本 - 请参阅 bit.ly/jqsource 并搜索 Sizzle.attr = function。 jQuery（或者更确切地说，Sizzle）必须通过所有代码来获取您的 id，而只需使用 DOM 就可以直接为您获取它。

对我有用。 +1

【参考方案2】：

你可以试试下面的代码。也可以试试 jsfiddle（演示）。

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

Try the demo

第二个问题的答案是您可以将事件分配给孩子并从其父母中删除。看看这个。

.stopPropagation(); 

防止事件在 DOM 树中冒泡，防止任何 父处理程序不会被通知事件。 Read more

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

event.stopImmediatePropagation()

阻止其余的处理程序被执行，并防止事件在 DOM 树中冒泡。 Read more

我希望这能解决您的问题。如果您有任何问题，请随时提问。谢谢

【参考方案3】：

如果您的元素有孙子，则有更好的方法来获取子元素。注意大于号。

$('.parent > .child').click(function() 
    // This will be the child even if grandchild is clicked
    console.log($(this));
);