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

Question

在 Ember 中，我想要一个父 div，单击该父 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>

但我不希望在单击选择标签时调用“shouldNotBeCalledOnSelect”操作。我在 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 提供的答案将不起作用!看我的twiddle我在其中尝试了 kumkanillam 提出的解决方案以及分别使用 bubbles=false 进行第一次和第二次选择的正确方法。

这就是 Ember 官方 API 中 bubbles=false 不适用于第一个选择而适用于第二个选择的原因。 “要使用闭包样式操作禁用冒泡，您必须创建自己的使用 event.stopPropagation() 的包装器助手”。请参阅documentation了解详情。

总而言之，如果您使用最初发布的情况下的关闭操作，则必须编写一个操作处理程序并调用 event.stopPropagation() 以防止事件冒泡。如果您使用旧式操作助手(旋转中的第二个选择)，则 bubbles=false 将起作用。

您可以在以下内容中阅读有关操作助手的更多信息link了解有关 Action 助手的更多信息。