javascript - meteor 事件的目标是在带有内部图标的链接上表现异常

Question

伙计们，我对 Meteor 的事件目标感到困惑:假设我有两个链接，一个里面有一个图标(这里:Font Awesome)，另一个有一个简单的“x”:

myTemplate.html

<a href="#" id="linkA" data-id="link"><i data-id="icon" class="icon-remove icon-white"></i></a>
<a href="#" id="linkB" data-id="link">x</a>

我在每个事件上都使用了一个点击事件，这两个事件是一样的:

myTemplate.js

Template.myTemplate.events({
    'click #linkA': function(event,template) {
        event.preventDefault();
        console.log(event.target.getAttribute("data-id"));
    },
    'click #linkB': function(event,template) {
        event.preventDefault();
        console.log(event.target.getAttribute("data-id"));
    }
}

那么我希望它们的行为相同。相反，linkA 的事件为我提供了控制台的“图标”，这是图标的数据 ID，而 linkB 的事件为我提供了到控制台的“链接”，这是链接的数据 ID。我希望两者都是后者。

知道是什么原因导致了这种行为吗？

Answer 1

使用 event.currentTarget 而不是 event.target 它会起作用，并学习如何处理嵌套事件和事件冒泡