防止點擊進入{{input}}組件傳播/冒泡（灰燼）

Question

我在本身具有動作的元素內部有一個{{input}} 。
如何防止單擊輸入觸發父元素上的click事件？

1. 我嘗試了bubbles=false 。
2. 我還嘗試擴展{{input}} ，在擴展輸入中，我捕獲了click事件，並稱為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

定義組件，例如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 }}

這是工作中的瑣事