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

Meteor events target behaving strange on links with inner icons

本文关键字：链接 图标 目标 事件 流星 内部      更新时间：2023-09-26

伙计们，我对流星的事件目标感到困惑：假设我有两个链接，一个里面有一个图标（这里：字体真棒），一个带有简单的"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 的事件为我提供了控制台的"图标"，这是图标的数据 ID，而 linkB 的事件将我带到控制台的"链接"，这是链接的数据 ID。我希望两者都是后者。

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

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

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

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

您可以在此处阅读有关此内容的更多信息

相关文章：