5

我有以下标记：

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

小提琴中的代码：

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

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

这是一个小提琴：http: //jsfiddle.net/CgC4V/

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

4

4 回答 4

10

该事件正在冒泡，但您正在测试的目标e.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/

更新评论：

“然后我应该访问 jquery.event.currentTarget 吗？在上下文不是 jquery 元素的情况下怎么办。jQuery.event 的哪个属性引用了正确的元素？”

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

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

于 2013-09-17T20:50:02.283 回答
1 
$('img').on('click', function (e) {
    if ($(e.target).parent('li').hasClass('tgt')) {
        $(e.target).parent('li').addClass('active');
    }
});

这将成为img实际目标，但仍为整个列表项提供突出显示。

于 2013-09-17T20:52:51.280 回答
1

e 指的是事件，但是您想在单击 obj 时添加类，因此只需将 $(e.target) 更改为 $(this) 即可：

$('.tgt').on('click', function (e) {
    if ($(this).hasClass('tgt')) {
        $(this).addClass('active');
    }
});
于 2013-09-17T20:53:27.837 回答
1

您将要使用$(this)而不是event.target，因为它$(this)始终是它<li>本身，如果图像是接收到点击事件的 DOM 中最深的可用元素，则 whereevent.target将指向图像。

看这个演示。

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

编辑澄清：考虑下面的结果。

单击时，<li>而不是：<img>

  • $(this)指向<li>
  • event.target指向<li>

单击时<img>：

  • $(this)指向<li>
  • event.target指向<img>

这是因为，在所有接收到点击事件的元素中，event.target总是指向 DOM 中最深的那个。$(this)但是，它将始终位于<li>并且会捕获从单击的 冒泡的任何事件<img>。

于 2013-09-17T20:53:46.710 回答