javascript - 点击图片时点击事件不冒泡

Question

我有以下标记:

<ul>
    <li class="tgt"><img src="http://placehold.it/48x48" width="48px" height="48px"></li>
    <li class="tgt"><img src="http://placehold.it/48x48" width="48px" height="48px"></li>
    <li class="tgt"><img src="http://placehold.it/48x48" width="48px" height="48px"></li>
</ul>

fiddle 中的代码:

$('.tgt').on('click', function (e) {
    if ($(e.target).hasClass('tgt')) {
        $(e.target).addClass('active');
    }
});

我使用 jquery 的事件委托(delegate)将点击处理程序附加到所有 .tgt 元素。出于某种原因，如果我单击图像，事件不会冒泡到 li。相反，事件目标显示为图像。

这是一个 fiddle : http://jsfiddle.net/CgC4V/

为什么事件没有冒泡到 li.tgt？

Answer 1

事件正在冒泡，但是您正在使用e.target 测试的target 元素是实际被点击的元素你可以在这里看到:http://jsfiddle.net/CgC4V/1/

这就是事件冒泡的工作方式 - 如果事件没有冒泡，则不会触发附加到 li 元素的处理程序。

您可以使用 this 来引用被点击的 li:

$('.tgt').on('click', function (e) {
    $('.active').removeClass('active');
    if ($(this).hasClass('tgt')) {
        $(this).addClass('active');
    }
});

虽然您可能不需要测试该元素是否具有 tgt 类，因为您已经知道它一定是最初具有该类的 li 元素之一。

演示:http://jsfiddle.net/CgC4V/3/

评论更新:

"Should I then be accessing jquery.event.currentTarget instead? What about in cases where the context is not the jquery element. What property of jQuery.event has a reference to the correct element?"

是的，event.currentTarget会给你正确的元素。 “通常”，对于您显示的代码，event.currentTarget 将与 this 相同，但如果您要执行某些操作以更改 的值code>this(例如，如果您使用过 $.proxy() 或 Function.prototype.bind())，那么 event.currentTarget 将为您提供正确的元素。

另请注意，有时 event.currentTarget 将与 event.target 相同的元素(和 this 如果您没有更改 this) - 在您的示例中，如果您单击 li 元素的“点”而不是图像，则目标是 li 本身。