1. ホーム
  2. アンギュラー

[解決済み】マウスイベントの伝搬を停止する

2022-03-29 15:10:57

質問

Angularでマウスイベントの伝播を停止させる最も簡単な方法は何ですか?

特別な $event オブジェクトを作成し stopPropagation() を自分で作るか、何か他の方法があるはずです。

例えばMeteorの場合、単純に false をイベントハンドラから取得します。

解決方法は?

同じコードを何度もコピー&ペーストすることなく、任意の要素に追加できるようにしたい場合は、これを実現するためのディレクティブを作成します。以下のように簡単です。

import {Directive, HostListener} from "@angular/core";
    
@Directive({
    selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

そして、それを必要な要素に追加するだけです。

<div click-stop-propagation>Stop Propagation</div>