Question

我有一个div，div内有一个子img元素。 div和img都有自己的javascript click handler。

我的目标是点击img时，只触发img click。但目前div click handler正在img click handler之前回复。

我不确定父母的position: relative是否是罪魁祸首。但这是一种强制性的风格。我还尝试使用z-index img，但没有用。

提前致谢！

Answer 1

在您使用jQuery 1.7 +时，将已弃用的.live()替换为.on()。

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

<强> Fiddle

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

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

Fiddle

.live将事件一直冒泡到文档，然后检查给定的选择器是否与目标元素匹配，此时您无法再停止事件传播。来自docs：

在事件处理程序中调用event.stopPropagation()对于停止附加在文档中较低位置的事件处理程序是无效的;该事件已传播至document。

另外，要回答“父母优先”问题，那不是案例。当您致电.live时，您实际上是将处理程序附加到document。

在这种情况下，通过.click(function(){})附加的处理程序（在jQuery 1.7+中是.on('click'[, null], function(){})的简写）在附加到document的处理程序之前执行，这是预期的事件传播冒泡行为。

Answer 2

能够通过执行以下操作来解决问题：

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


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

这是Fiddle.

父母在DIV点击事件上优先于孩子

2 个答案: