在Ember中，使用SELECT标签停止点击事件传播的最佳方法是什么

Question

在ember中，我想拥有一个父div，单击时会调用操作，除非在该div中单击"选择标签"。我最终提出了一个解决方案，但这不是很好，并且想知道有人可以解释为什么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>

，但是我不希望在单击"选择标签"时调用" Note notBecalleDonSelect"。我尝试了selectValue动作上的气泡= false，但这无效。我想不出一种方法，可以按照SelectValue动作来通过事件，如果可以的话，我可以打电话

event.stopPropagation();

通过操作，您可以使用

获得活动

onclick={{action 'someAction'}}

然后可以在JavaScript中检索该事件作为最后一个参数。我实现的解决方案有点垃圾，是在选择标签上同时和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事件冒泡来阻止单击事件传播到DIV元素。

其次，答案kumkanillam proivded将行不通！！！在尝试Kumkanillam提出的解决方案和分别使用bubbles=false进行第一和第二选择的正确方法。

的正确方法。

这是bubbles=false不适用于第一个选择的原因，并从Ember的官方API中选择第二个选择。"要使用闭合风格的动作禁用冒泡，您必须创建自己的包装辅助器，该助手使用event.stoppropagation（）"。有关详细信息，请参见文档。

总结一下，如果您使用原始帖子的封闭操作，则必须编写一个操作处理程序并致电event.stopPropagation()以防止事件发生冒泡。如果您使用旧样式的动作助手（在Twiddle中的第二个选择），则bubbles=false将起作用。

您可以在以下链接中阅读有关行动帮助者的更多信息，以了解有关行动帮助者的更多信息。

Answer 2

您可以通过bubbles=false参数停止事件传播到Action Helper。但是在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() {
}