Угловая остановка распространения различных событий

В моем приложении 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)?

Заранее спасибо.

Вы хотите заблокировать (dblclick), когда делать одиночный щелчок правой кнопкой мыши?

Dimuthu 13.04.2018 05:54

Как насчет использования EventEmitter в качестве @output от ребенка, который можно отслеживать в функции ngOnChanges(changes: SimpleChanges)parentComponent. Вы не можете управлять родительским событием dblclick, но вы, безусловно, можете установить boolean, который может разрешить выполнение функции goBack(). Я надеюсь это помогло

Shashank Vivek 13.04.2018 08:16

Это хорошая идея. К сожалению, я ответил неточно. Дочерний элемент - это не компонент angular, это просто кнопка HTML. Если бы я собирался пойти по этому пути, мне пришлось бы сделать его настоящим компонентом.

Steven K. 14.04.2018 04:28
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
3
4 267
1

Ответы 1

Вы можете попробовать что-то подобное ниже. Думаю, это самый простой способ.

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 из события добавления, поскольку на родительском элементе нет события (щелчка)

Steven K. 14.04.2018 04:31

Другие вопросы по теме