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它会起作用，并学习如何处理嵌套事件和事件冒泡

Answer 2

所以，我们这里有的是事件冒泡。这是javascript问题，而不是流星。

在第一种情况下，您实际上是单击<i>元素，并且该事件正在向其父项冒泡，并且由于#linkA父项具有单击处理程序，因此它会记录event.target（{{1} }）data-id属性。

您可以阅读有关此here

的更多信息

Meteor事件目标在与内部图标的链接上表现得很奇怪

2 个答案: