Question

我的情况是，我已将onclick事件附加到锚标记，但其中有一个span标记作为子项;因此当我做这样的事情时：

HTML：

<a href="#" class="toggle js-toggle" data-target-cat="3">
    <span class="icon-angle-down"></span>
</a>

JS：

$('.js-toggle').on('click', function(e) {

    e.preventDefault();

    var cat_id = $(e.target).data('target-cat');

});

它不起作用，因为e代表span元素;确定我可以再次将该属性放在跨度上，但我很偏执有时anchor 可能触发它而不是span我不想复制两个元素的属性。

所以我决定这样做：

$('.js-toggle').on('click', function(e) {

    e.preventDefault();

    var cat_id = $(e.target).data('target-cat');

    if (typeof cat_id === "undefined") {
        // Seems the click was triggered by a child of the anchor tag; grab it from the parent
        cat_id = $(e.target).parent().data('target-cat');
    }

});

这很有效，但是我不太习惯这样做，如果子元素在锚点内发生变化会发生什么。

是否有更一致的方法可以执行此操作，还是应该将onclick事件放在span标记上？

奖金问题：如果e.preventDefault();代表e代码而不代表span，为什么anchor有效？

Answer 1

尝试$（this）而不是$（e.target）：

$（＆＃39; .js-toggle＆＃39;）。on（＆＃39;点击＆＃39;，功能（e）{

e.preventDefault();

var cat_id = $(this).data('target-cat');

}）;

Answer 2

您正在使用event.target引用该事件的元素。但你想要的是访问你注册事件处理程序的元素 - 请参阅event.currentTarget。

对于您的“红利问题”，您需要了解在捕获或冒泡阶段的任何时候都可以阻止任何元素的默认操作。也就是说，因为您在<a>上注册了事件处理程序，这就是您阻止默认值的地方，而不是您所假设的<span>。

Answer 3

回答您的红利问题： e.preventDefault（）起作用，因为事件在锚标记上，而不在span元素上。正如您在此处所看到的，您在$（＆＃39; .js-toggle＆＃39;）上调用on click事件代表锚标记。

将onclick事件绑定到带有子项的锚标记并从锚点获取attrubute数据

3 个答案: