假设我有一个父元素,它内部有很多嵌套的子元素:
<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中删除事件侦听器。
发布于 2012-10-06 17:34:48
您需要将事件对象传递给function以获取触发事件的项,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')。
发布于 2012-10-06 17:41:38
你可以试试下面的代码。也可以试试jsfiddle (Demo)。
$('#p').on('click', function(event) {
alert(event.target.id);
});第二个问题的答案是,您可以将事件分配给子对象并从其父对象中移除。看看这个。
.stopPropagation(); 防止事件在DOM树上冒泡,防止任何父处理程序收到事件通知。Read more
如果只希望执行特定的事件,而不允许触发其他事件,请使用下面的代码
event.stopImmediatePropagation()防止其余的处理程序被执行,并防止事件在DOM树上冒泡。Read more
我希望这能解决你的问题。如果你有任何问题,请不要犹豫,尽管问。谢谢
发布于 2017-05-31 06:15:54
如果您的元素有孙子元素,那么有一种更好的方法来获取子元素。请注意大于号。
$('.parent > .child').click(function() {
// This will be the child even if grandchild is clicked
console.log($(this));
});https://stackoverflow.com/questions/12758547
复制相似问题