Question

我有一个布局，其中动作处理程序被赋予父div，另一个动作处理程序被赋予子li元素。

现在，当单击li元素时，动作处理程序会触发，冒泡再次触发其父动作处理程序。

我需要通过li元素来阻止动作处理程序的冒泡，并且需要阻止进一步的冒泡。

模板：

<script type="text/x-handlebars" data-template-name="index">
    <div {{action 'headerAction'}} style="border:1px solid red;">
    Parent Div 

    <ul>
    {{#each item in model}}
        <li {{action 'liAction'}}>{{item}}</li>
    {{/each}}
    </ul>
    </div>
</script>

app.js

App.IndexRoute = Ember.Route.extend({
model: function() {
    return ['red', 'yellow', 'blue'];
},
actions:{
headerAction: function(){
  alert('headerAction');
},
liAction: function(e){
  alert('liAction');
}
}
});

JSBIN Link

Answer 1

从模板内部，您可以传递bubbles=false选项以防止该行为。

<li {{action 'liAction' bubbles=false}}></li>

此外，这是不必要的，但在添加bubbles选项时，我也发现显式声明事件类型很有帮助：

<li {{action 'liAction' on='click' bubbles=false}}></li>

您可以在指南here中详细了解事件冒泡（以及其他操作选项）。

Ember停止动作处理程序的传播

1 个答案: