jQuery的单击事件的父母，但要找到孩子（点击）元素

让说，我有其中有自身内部这么多的嵌套子元素父元素：jQuery的单击事件的父母，但要找到孩子（点击）元素

<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 Mahdi

您需要传递事件对象才能获取触发事件的项目，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')以提高性能，简化性和可读性。

来源

2012-10-06 09:34:48 Adil

谢谢你，它的工作原理！ :) ...我应该等待接受你的答案！ – Mahdi

不客气@Mahdi。 – Adil

为了记录，'$（event.target）.attr（'id'）'是'event.target.id'慢得多的版本 - 参见http://bit.ly/jqsource并搜索'Sizzle。 attr = function'。 jQuery（或者说，Sizzle）必须通过所有的代码才能得到你的id，只需使用DOM就可以直接获取它。 – Remy

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

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

Try the demo

回答你的第二个问题是，您可以指定事件的孩子并从它的父。看一下这个。

.stopPropagation();

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

，如果你想只执行的特定事件，并允许任何其他事件被解雇您使用以下

event.stopImmediatePropagation()

代码被执行保持处理器的其余部分，阻止事件冒泡DOM树。 Read more

我希望这能解决您的问题。如果您有任何问题，请不要犹豫，问。谢谢

来源

2012-10-06 09:41:38 Techie

感谢您的回答和解释！ :) – Mahdi

@Mahdi欢迎您:-) – Techie

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

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

来源

2017-05-30 22:15:53 Eddie

jQuery的单击事件的父母，但要找到孩子（点击）元素

回答

相关问题