防止从 propagating/bubbling 向上点击 {{input}} 组件 (ember)

Question

我在元素内部有一个 {{input}}，它本身有一个动作。
如何防止点击输入框触发父元素上的点击事件？

1. 我试过了bubbles=false。
2. 我也尝试过扩展 {{input}} 并且在扩展输入中我捕获了点击事件并调用了 event.preventDefault()

请试试我的测试用例: https://ember-twiddle.com/a2cee9abd63a7400124e2745a7820cf8?numColumns=2&openFiles=controllers.application.js%2Ctemplates.application.hbs

例 hbs:

<div {{action "alert"}}>
  I don't want the click into the input to trigger the div's onlick. Help!<br/>
  {{input bubbles=false}}
</div>

Answer 1

定义扩展 Ember.TextField 的组件 say my-input 并定义 click 函数和 return false 以防止冒泡。

import Ember from 'ember';
export default Ember.TextField.extend({
  click(){
    console.log('click my input');
    return false;
  }
});

对于my-input组件，您不需要定义任何东西来处理点击事件，同时包含该组件。你可以直接说 {{my-input }}

这是工作twiddle