Javascript 流星事件目标在带有内部图标的链接上表现奇怪

各位，我对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>

那么我希望他们俩的行为都一样。相反，linkA的事件给我控制台的“图标”，这是图标的数据id，linkB的事件给我控制台的“链接”，这是链接的数据id。我希望两者都是后者

---

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

所以，我们这里看到的是事件冒泡。这是javascript的问题，不是meteor的问题

在第一种情况下，您实际上单击了

元素，该事件向其父级冒泡，并且由于

#linkA

父级具有click handler，因此它记录event.target（即

）数据id属性

---

您可以阅读更多关于此的信息，使用

event.currentTarget

而不是

event.target

，它会起作用，并学习如何处理嵌套事件和事件冒泡

刚刚发现Meteor很久以前就已经解决了这一问题，并且在facepalm下有很好的文档记录；）@MoritzWalter你说的“修复”是什么意思？这就是javascript的工作原理；-）在您的情况下，只需使用

event.currentTarget

而不是

event.target

，那么currentTarget不是流星特有的吗？绝对不是！整个

事件

对象根本不是流星的。好了，现在完全有道理了！据我所知，这确实是一个黑洞，我以前不知道嵌套事件和事件冒泡。谢谢你的提示！

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"));
    }
}