防止点击进入 {{input}} 组件传播/冒泡（余烬）答案

【问题标题】：Prevent click into {{input}} component from propagating/bubbling up (ember)防止点击进入 {{input}} 组件传播/冒泡（余烬）
【发布时间】：2017-01-27 23:25:39
【问题描述】：

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

我试过bubbles=false。
我也尝试过扩展{{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>

【问题讨论】：

能否请您输入您为第二个选项尝试的确切代码？我试过了

标签： ember.js onclick components event-bubbling

【解决方案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 组件，您不需要定义任何内容来处理单击事件，同时包含该组件。你可以说{{my-input }}

这是工作的twiddle

【讨论】：

我没有尝试return false;感谢您的帮助。