3

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

我的模板.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>

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

我的模板.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 的事件为我提供了控制台的“图标”，这是图标的 data-id，而 linkB 的事件将我的“链接”带到了控制台，这是链接的 data-id。我希望两者都是后者。

任何想法是什么导致这种行为？

4

2 回答 2

4

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

于 2013-09-14T19:05:36.467 回答
3

So, what we have here is event bubbling. It's javascript issue, not meteor's.

In the first case, you actually click <i> element, and that event is bubbling to its parents, and since #linkA parent has click handler it logs event.target (which is <i>) data-id attribute.

You can read more about this here

于 2013-09-14T18:46:46.700 回答