阻止点击{{input}}组件进行传播/冒泡（ember）

Question

我在一个元素内部有一个bubbles=false，它本身就有一个动作 如何阻止点击输入以触发父元素上的点击事件？

1. 我试过{{input}}。
2. 我也尝试过扩展event.preventDefault()，在扩展输入中我抓住了点击事件并调用了<div {{action "alert"}}> I don't want the click into the input to trigger the div's onlick. Help!<br/> {{input bubbles=false}} </div>

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

示例hbs：

＆＃13;
＆＃13;
Profile 7
＆＃13;
＆＃13;
＆＃13;

Answer 1

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

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

对于my-input组件，您不需要定义任何内容来处理包含组件的click事件。你可以说{{my-input }}

这是工作twiddle