Meteor：嵌套模板上的多个事件触发答案

【问题标题】：Meteor: multiple event fireing on nested templatesMeteor：嵌套模板上的多个事件触发
【发布时间】：2016-05-06 05:58:09
【问题描述】：

我有一个模板结构，它使用嵌套模板来显示每个元素的子元素。到目前为止，这是有效的。

此外，我有一个图标点击事件 (click .fa-edit)。如果我在第一级单击该图标，则一切正常，但是如果单击嵌套元素，则单击会导致多个事件，因此单击一次即可获得多个 console.log。我不明白这一点，因此我不知道如何防止这种情况发生。

主模板

<template name="main">

    {{#if Template.subscriptionsReady}}

        <div id="elements">
            {{ > getElements parentId=id }}
        </div>

    {{else}}
        <div class="loading">{{ > spinner }}</div>
    {{/if}}

</template>

子模板

<template name="getElements">   

    {{#each children}}  
        <div class="row">
            <input type="text" name="keyword" value="{{value}}"><i class="fa fa-edit"></i>
        </div>

        {{#if subchilden}}
            {{ > getElements parentId=id  }}
        {{/if}}
    {{/each}}

</template>

活动

Template.getElements.events({
    'click .fa-edit': function(event) {
        console.log('click');
    }
});

【问题讨论】：

标签： javascript meteor

【解决方案1】：

问题是事件被委托给模板中的外部元素。

由于您有嵌套的模板（相同的模板），当触发事件时，它会冒泡到父模板的所有外部元素并被它们捕获。

你需要防止事件冒泡

Template.getElements.events({
    'click .fa-edit': function(event) {
        event.stopPropagation(); // add this to stop the event from bubbling any further
        console.log('click');
    }
});

【讨论】：

在这个例子中你的意思是event.stopPropagation()，对吧？
@user3142695 是的，很抱歉。更新了答案。
我应该更喜欢使用 getElements-Template 上的事件（使用 stopPropagation），还是应该将此事件放在主模板上？
我并没有真正受过流星方面的教育，但我认为使用getElements 模板会更好（模块化）。但是，如果它与 main 模板紧密耦合（getElements 仅在 main 一个内使用），无论哪种方式都可以。