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将为您提供源元素。

<强> 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')，以提高性能，简化性和可读性。

Answer 2

您可以尝试以下代码。也可以尝试jsfiddle（演示）。

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

Try the demo

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

.stopPropagation();

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

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

下面的代码

event.stopImmediatePropagation()

保持其余处理程序不被执行，并防止事件冒泡DOM树。 Read more

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

Answer 3

如果你的元素有孙子女，那么有一个更好的方法来获得孩子。请注意大于号。

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

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

3 个答案: