关于javascript：父元素上的jQuery click事件，但找到子元素(被单击)

jQuery click event on parent, but finding the child (clicked) element

假设我有一个父元素，它本身内部有许多嵌套子元素：

1	</div id="c4">

我已经在父级上绑定了一个click事件：

1
2
3

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

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

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

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

现场演示

1
2
3

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

要么

现场演示

1
2
3

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

编辑

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

相关讨论

您可以尝试以下代码。也可以尝试jsfiddle(demo)。

1
2
3

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

试试演示

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

1	.stopPropagation();

防止事件使DOM树冒泡，从而防止事件
通知父处理程序。阅读更多

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

1	event.stopImmediatePropagation()

防止其余处理程序被执行，并防止事件使DOM树冒泡。阅读更多

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

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

1
2
3
4

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