Предотвратить распространение / всплывание компонента {{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 вам не нужно определять что-либо для обработки события щелчка при включении компонента. ты можешь просто сказать {{my-input }}

Вот рабочий твиддл