Question

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

此外，我点击了图标上的活动（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');
    }
});

Answer 1

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

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

您需要阻止事件的冒泡

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

Meteor：在嵌套模板上发起多个事件

1 个答案: