javascript - Meteor events target behaving strange on links with inner icons - Stack Overflow

admin管理员组

文章数量:1391981

Folks, I am confused with Meteor's event targets: Let's say I have two links, one with an icon (here: Font Awesome) inside, one with a simple "x" instead:

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>

and I am using a click event on each, both events are just the same:

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

then I would expect them both to behave just the same. Instead, linkA's event gives me "icon" to the console, which is the data-id of the icon, and linkB's event brings me "link" to the console, which is the data-id of the link. I would expect the latter for both.

Any ideas what causes this behavior?

Folks, I am confused with Meteor's event targets: Let's say I have two links, one with an icon (here: Font Awesome) inside, one with a simple "x" instead:

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>

and I am using a click event on each, both events are just the same:

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

then I would expect them both to behave just the same. Instead, linkA's event gives me "icon" to the console, which is the data-id of the icon, and linkB's event brings me "link" to the console, which is the data-id of the link. I would expect the latter for both.

Any ideas what causes this behavior?

• javascript
• events
• meteor

Share Improve this question Follow asked Sep 14, 2013 at 18:32 Moritz WalterMoritz Walter 71755 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Use event.currentTarget instead of event.target and it'll work, and learn how to deal with nested events and event bubbling

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

本文标签： javascriptMeteor events target behaving strange on links with inner iconsStack Overflow