jQuery点击父元素触发事件，但是如何找到被点击的子元素？

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中删除事件侦听器。

- Mahdi

Answer 1

为了获取触发事件的项目，您需要将事件对象传递到函数中，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')，因为这种方法性能更好、更简单和更易读。

- Adil

---

谢谢，伙计，它起作用了！ :) ... 我应该等待接受你的答案！ - Mahdi

顺便说一下，$(event.target).attr('id') 是 event.target.id 的远慢于它的版本 - 请参见 http://bit.ly/jqsource 并搜索 Sizzle.attr = function。jQuery（或者更确切地说是 Sizzle）必须通过所有这些代码来获取您的 id，而直接使用 DOM 就可以为您获取它。 - Remy

有用的对我来说。+1 - Alive to die - Anant

Answer 2

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

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

试一试这个演示

对于你的第二个问题，你可以将事件分配给子元素并从其父元素中删除。看看这个。

.stopPropagation(); 

阻止事件冒泡到DOM树上，防止任何父处理器通知该事件。 了解更多

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

event.stopImmediatePropagation()

阻止其他处理程序的执行并防止事件冒泡到DOM树上。 了解更多

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

- Techie

Answer 3

如果您的元素有孙元素，有一种更好的方法可以仅获取子元素。请注意大于号。

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

- Eddie