В моем приложении Angular 4 у меня есть родительский компонент с обработчиком (dblclick) и дочерний компонент с обработчиком (click).
component.html
<mat-list (dblclick) = "goBack()">
<button (click) = "add($event)"> Add </button>
</mat-list>
component.ts
add(event){
event.stopPropagation();
doSomething();
}
Однако из того, что я видел, stopPropagation останавливает только события одного типа. В этом примере, если кто-то дважды нажимает кнопку, вызывается функция goBack (). Если я изменяю событие родительского компонента на одно событие (щелчок), распространение останавливается.
Есть ли способ заблокировать (dblclick) в родительском элементе через дочернее событие (click)?
Заранее спасибо.
Как насчет использования EventEmitter
в качестве @output
от ребенка, который можно отслеживать в функции ngOnChanges(changes: SimpleChanges)
parentComponent
. Вы не можете управлять родительским событием dblclick, но вы, безусловно, можете установить boolean
, который может разрешить выполнение функции goBack()
. Я надеюсь это помогло
Это хорошая идея. К сожалению, я ответил неточно. Дочерний элемент - это не компонент angular, это просто кнопка HTML. Если бы я собирался пойти по этому пути, мне пришлось бы сделать его настоящим компонентом.
Вы можете попробовать что-то подобное ниже. Думаю, это самый простой способ.
event.target
всегда относится к самому высокому уровню внутри родителя, на котором назначается событие. Вместо nodeName вы можете сравнить цель по классу или идентификатору, чтобы убедиться, что это правая кнопка.
<mat-list (dblclick) = "goBack($event)">
<button (click) = "add($event)"> Add </button>
</mat-list>
goBack(event){
if (event.target.nodeName === "BUTTON"){
return;
}
doSomething();
}
add(event){
event.stopPropagation();
doSomething();
}
Вот у вас рабочий plnkr
Отлично, это сработает, спасибо. Я предполагаю, что тогда я могу удалить stopPropagation из события добавления, поскольку на родительском элементе нет события (щелчка)
Вы хотите заблокировать (dblclick), когда делать одиночный щелчок правой кнопкой мыши?