使用流星自动生成模式按钮时停止事件传播答案

【问题标题】：stop event propagation when using meteor autoform modal button使用流星自动生成模式按钮时停止事件传播
【发布时间】：2015-10-28 07:59:56
【问题描述】：

我创建了一个包含在 afModal 模板中的列表组。在每个列表组项中，都有触发不同事件的字形按钮。

<div class="list-group">
    {{#each getRuns}}
        {{#afModal title="Edit Run" class="list-group-item" collection="Runs" operation="update" doc=_id formId="editRunForm"}}
                {{#if active}}
                    <span class="glyphicon glyphicon-pause pull-right" name="pause" id="{{_id}}"></span>
                    <span class="badge">Active</span>
                {{else}}
                    <span class="glyphicon glyphicon-remove pull-right" name="delete" id="{{_id}}"></span>
                    <span class="glyphicon glyphicon-play pull-right" name="activate" id="{{_id}}"></span>
                {{/if}}
                <h3>{{name}}</h3>
                <p class="list-group-item-text">Assembly: {{assemblyName}}</p>
                <p class="list-group-item-text">Quantity: {{quantity}}</p>
                <p class="list-group-item-text">Progress: {{completedSteps}} of {{totalSteps}} steps completed</p>
        {{/afModal}}
    {{/each}}
</div

这里是字形点击事件

'click [name="delete"]': function(event) {
    if (confirmDelete()) {
        Meteor.call('removeRun', event.target.id, function(error) {
            if (error) {
                alert(error);
            }
        });
    }

    event.preventDefault();
},
'click [name="activate"]': function(event) {
    Meteor.call('activateRun', event.target.id);
    event.preventDefault();
},
'click [name="pause"]': function(event) {
    Meteor.call('pauseRun', event.target.id);
    event.preventDefault();
}

当触发 glyphicon 点击事件时，也会触发上面的 afModal 按钮。我尝试在 glyphicon click 事件中包含 event.stopPropagation()、event.stopImmediatePropagation() 和 event.preventDefault() 以防止 afModal 弹出，但它们都不起作用。

以前，列表组被包裹在链接元素中，看起来像这样。

<div class="list-group">
    {{#each getRuns}}
        <a href="{{pathFor 'editRun'}}" class="list-group-item">
                {{#if active}}
                    <span class="glyphicon glyphicon-pause pull-right" name="pause" id="{{_id}}"></span>
                    <span class="badge">Active</span>
                {{else}}
                    <span class="glyphicon glyphicon-remove pull-right" name="delete" id="{{_id}}"></span>
                    <span class="glyphicon glyphicon-play pull-right" name="activate" id="{{_id}}"></span>
                {{/if}}
                <h3>{{name}}</h3>
                <p class="list-group-item-text">Assembly: {{assemblyName}}</p>
                <p class="list-group-item-text">Quantity: {{quantity}}</p>
                <p class="list-group-item-text">Progress: {{completedSteps}} of {{totalSteps}} steps completed</p>
        </a>
    {{/each}}
</div>

使用“a”元素（并使用相同的 glyphicon click 事件处理程序）我能够阻止“a”元素触发。如果可能的话，我真的很想使用 afModal 模板，但每次单击其中一个 glpyhicons 时都不能弹出模式。有什么建议吗？

【问题讨论】：

标签： meteor modal-dialog meteor-autoform event-propagation

【解决方案1】：

关键是先调用preventDefault，因此会发生变化

'click [name="pause"]': function(event) {
    Meteor.call('pauseRun', event.target.id);
    event.preventDefault();
}

到

'click [name="pause"]': function(event) {
    event.preventDefault();
    Meteor.call('pauseRun', event.target.id);
}

应该可以。当然，您应该对所有事件处理程序都这样做。

【讨论】：