首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >父元素上的jQuery单击事件,但找到子(已单击)元素

父元素上的jQuery单击事件,但找到子(已单击)元素
EN

Stack Overflow用户
提问于 2012-10-06 17:33:28
回答 3查看 70.6K关注 0票数 41

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

代码语言:javascript
复制
<div id="p">
    <div id="c1">
        <div id="c2"></div>
        <div id="c3"></div>
    </div id="c4">
        <div id="c5"></div>
    </div>
</div>

我已经在父对象上绑定了一个click事件:

代码语言:javascript
复制
$('#p').bind('click', function() {
    alert($(this).attr('id'));
});

因为事件被分配给父元素,所以我总是看到父id,然而,我想知道是否有任何可能的方法来找出这个子元素中的哪些被单击了?

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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-10-06 17:34:48

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

代码语言:javascript
复制
 $('#p').bind('click', function(event) {
    alert(event.target.id);
 });

代码语言:javascript
复制
$('#p').bind('click', function(event) {
    alert($(event.target).attr('id'));
});

编辑

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

票数 57
EN

Stack Overflow用户

发布于 2012-10-06 17:41:38

你可以试试下面的代码。也可以试试jsfiddle (Demo)。

代码语言:javascript
复制
$('#p').on('click', function(event) {
    alert(event.target.id);
});​

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

代码语言:javascript
复制
.stopPropagation(); 

防止事件在DOM树上冒泡,防止任何父处理程序收到事件通知。Read more

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

代码语言:javascript
复制
event.stopImmediatePropagation()

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

我希望这能解决你的问题。如果你有任何问题,请不要犹豫,尽管问。谢谢

票数 7
EN

Stack Overflow用户

发布于 2017-05-31 06:15:54

如果您的元素有孙子元素,那么有一种更好的方法来获取子元素。请注意大于号。

代码语言:javascript
复制
$('.parent > .child').click(function() {
    // This will be the child even if grandchild is clicked
    console.log($(this));
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12758547

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档