Question

在Ember中，我希望有一个父div，点击后会调用一个动作，除非在该div中单击了一个select标记。我最终提出了一个解决方案，但它不是很好，并且想知道是否有人可以解释为什么bubbles = false在这种情况下不起作用，以及如何在selectValue操作上访问该事件（详情如下））。

原来我有：

<div class="parent-class" {{action 'shouldNotBeCalledOnSelect'}}>
    <select onchange={{action "selectValue" value="target.value"}}>
        <option class="default-option" disabled selected value>-</option>
        {{#each score.range as |valueChoice|}}
            <option value={{valueChoice}} selected={{eq score.value valueChoice}}>{{valueChoice}}</option>
        {{/each}}
    </select>
</div>

但我并不想要采取行动，而不应该禁止选择＆＃39;单击选择标记时调用。我在selectValue操作上尝试了bubbles = false，但这没有用。我无法想出用selectValue动作传递事件的方法，如果可以，我可以调用

event.stopPropagation();

通过操作，您可以使用

获取活动

onclick={{action 'someAction'}}

然后可以在Javascript中检索事件作为最后一个参数。我已经实现的解决方案有点垃圾，就是在select标签上同时使用onchange和onclick事件，并使用onclick专门用于停止传播。

<div class="parent-class" {{action 'shouldNotBeCalledOnSelect'}}>
    <select onchange={{action "selectValue" value="target.value"}} onclick={{action 'stopPropagation'}}>
        <option class="default-option" disabled selected value>-</option>
        {{#each score.range as |valueChoice|}}
            <option value={{valueChoice}} selected={{eq score.value valueChoice}}>{{valueChoice}}</option>
        {{/each}}
    </select>
</div>

在javascript中，我有：

selectValue(value) {
    this.set('score.value', value);
    this.get('score').save();
},

stopPropagation(event) {
    event.stopPropagation();
},

shouldNotBeCalledOnSelect() {
    console.log("CALLED");
}

Answer 1

首先，您需要处理onclick和onchange;因为它们是不同的事件，而且冒泡到div元素的事件是onclick。您无法通过阻止onchange事件冒泡来阻止click事件传播到div元素。

其次，答案kumkanillam proivded将无法正常工作！请参阅我的twiddle，其中我尝试了kumkanillam提出的解决方案以及分别使用bubbles=false进行第一次和第二次选择的正确方法。

以下是bubbles=false不适用于第一个选择的原因，适用于Ember官方API的第二个选择。＆＃34;要禁用带闭包样式操作的冒泡，您必须创建自己的包装器助手，它使用event.stopPropagation（）＆＃34;。有关详细信息，请参阅documentation。

总而言之，如果您使用原始发布的封闭操作，则必须编写操作处理程序并调用event.stopPropagation()以防止事件冒泡。如果您使用旧式动作助手（第二次选择），bubbles=false将起作用。

您可以在以下link中详细了解操作帮助程序，以了解有关操作帮助程序的更多信息。

Answer 2

您可以通过bubbles=false参数停止事件传播到操作助手。但是在onchange动作处理程序中，您无法停止onclick事件冒泡。所以在你的用例中，你可以定义noop函数并定义bubbles=false。您的解决方案是唯一的出路（AFAIK）。

<div class="parent-class" {{action 'shouldNotBeCalledOnSelect'}}>
    <select onchange={{action "selectValue" value="target.value"}} {{action 'fnToStopPropagation' bubbles=false}}>
        <option class="default-option" disabled selected value>-</option>
        {{#each score.range as |valueChoice|}}
            <option value={{valueChoice}} selected={{eq score.value valueChoice}}>{{valueChoice}}</option>
        {{/each}}
    </select>
</div>

定义空操作处理程序，

fnToStopPropagation() {
}

在Ember中，使用选择标记

2 个答案: