javascript - 在 DIV Click 事件中，父级优先于子级

Question

我有一个div并且里面div有一个子img元素。两者div都有img自己的 javascript click handler。

我的目标是当我点击 时img，只有img click被触发。但目前div click handler是在img click handler.

这是示例：http: //jsfiddle.net/5j73w/

我不确定父母是否position: relative是罪魁祸首。但这是一种强制性的风格。我也尝试过z-index，img但无济于事。

提前致谢！

Answer 1

在使用 jQuery 1.7+ 时替换不推荐使用.live()的 by 。.on()

$('#parent > img').on('click', function(e) {

小提琴

或者，如果您需要事件委托（例如，如果您将内容动态添加到#parent）：

//run this line when #parent is in the DOM
$('#parent').on('click', '> img', function(e) {

小提琴

.live将事件一直冒泡到文档，然后检查给定的选择器是否与目标元素匹配，到那时你不能再停止事件传播了。从文档：

调用event.stopPropagation()事件处理程序在停止附加在文档下方的事件处理程序方面是无效的；事件已经传播到document。

此外，要回答“父母优先”的问题，情况并非如此。当您调用 时.live，您实际上是在将处理程序附加到document.

In this case, the handler attached through .click(function(){}) (which in jQuery 1.7+ is a shorthand for .on('click'[, null], function(){}), executes before the handler attached to the document, which is the expected event propagation bubbling behavior.

Answer 2

能够通过执行以下操作进行修复：

$('#parent').click(function(e)
{
    console.log("parent click");
});


$('#child').click(function(e)
{
    console.log("child click");
    e.stopPropagation();
});

​</p>

这是小提琴。