blocks|key|4435524|text|如果您希望能够将此代码添加到任何元素中，而不必一次又一次地复制/粘贴相同的代码，则可以创建一个指令来执行此操作。非常简单，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435525|import+{Directive,+HostListener}+from+"@angular/core";
++++
@Directive({
++++selector:+"[click-stop-propagation]"
})
export+class+ClickStopPropagation
{
++++@HostListener("click",+["$event"])
++++public+onClick(event:+any):+void
++++{
++++++++event.stopPropagation();
++++}
}|code-block|syntax|javascript|4435526|然后只需将其添加到您想要其上的元素：|4435527|<div+click-stop-propagation>Stop+Propagation</div>|4435528|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If you want to be able to add this to any elements without having to copy/paste the same code over and over again, you can make a directive to do this. It is as simple as below:</p>
<pre class="lang-js prettyprint-override"><code>import {Directive, HostListener} from &quot;@angular/core&quot;;
    
@Directive({
    selector: &quot;[click-stop-propagation]&quot;
})
export class ClickStopPropagation
{
    @HostListener(&quot;click&quot;, [&quot;$event&quot;])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}
</code></pre>
<p>Then just add it to the element you want it on:</p>
<pre class="lang-html prettyprint-override"><code>&lt;div click-stop-propagation&gt;Stop Propagation&lt;/div&gt;
</code></pre>


blocks|key|4435648|text|最简单的方法是在事件处理程序上调用stop+propagation。$event在Angular+2中的工作原理相同，并且包含正在进行的事件(通过它可以执行鼠标单击、鼠标事件等)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4435649|(click)="onEvent($event)"|code-block|syntax|javascript|4435650|在事件处理程序上，我们可以在那里停止传播：|4435651|onEvent(event)+{
+++event.stopPropagation();
}|4435652|entityMap^0|Y|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>The simplest is to call stop propagation on an event handler. <code>$event</code> works the same in Angular 2, and contains the ongoing event (by it a mouse click, mouse event, etc.):</p>

<pre><code>(click)="onEvent($event)"
</code></pre>

<p>on the event handler, we can there stop the propagation:</p>

<pre><code>onEvent(event) {
   event.stopPropagation();
}
</code></pre>


blocks|key|4435740|text|添加来自@AndroidUniversity的答案。在一行代码中，你可以这样写它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435741|<component+(click)="$event.stopPropagation()"></component>|code-block|syntax|javascript|4435742|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Adding to the answer from @AndroidUniversity. In a single line you can write it like so:</p>

<pre><code>&lt;component (click)="$event.stopPropagation()"&gt;&lt;/component&gt;
</code></pre>


blocks|key|4435835|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435836|mycomponent.component.ts：|4435837|action(event):+void+{
++event.stopPropagation();
}|code-block|syntax|javascript|4435838|mycomponent.component.html：|4435839|<button+mat-icon-button+(click)="action($event);false">Click+me+!<button/>|4435840|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This worked for me:</p>

<p>mycomponent.component.ts:</p>

<pre><code>action(event): void {
  event.stopPropagation();
}
</code></pre>

<p>mycomponent.component.html:</p>

<pre><code>&lt;button mat-icon-button (click)="action($event);false"&gt;Click me !&lt;button/&gt;
</code></pre>


blocks|key|4435631|text|如果你在一个绑定到事件的方法中，只需返回false：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435632|@Component({
++(...)
++template:+`
++++<a+href="/test.html"+(click)="doSomething()">Test</a>
++`
})
export+class+MyComp+{
++doSomething()+{
++++(...)
++++return+false;
++}
}|code-block|syntax|javascript|4435633|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you're in a method bound to an event, simply return false:</p>

<pre><code>@Component({
  (...)
  template: `
    &lt;a href="/test.html" (click)="doSomething()"&gt;Test&lt;/a&gt;
  `
})
export class MyComp {
  doSomething() {
    (...)
    return false;
  }
}
</code></pre>


blocks|key|4435673|text|我不得不使用stopPropagation和preventDefault来防止按钮扩展它所在的手风琴项目。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4435674|所以..。|4435675|@Component({
++template:+`
++++<button+(click)="doSomething($event);+false">Test</button>
++`
})
export+class+MyComponent+{
++doSomething(e)+{
++++e.stopPropagation();
++++//+do+other+stuff...
++}
}|code-block|syntax|javascript|4435676|entityMap^0|6|F|M|E|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>I had to <code>stopPropagation</code> and <code>preventDefault</code> in order to prevent a button expanding an accordion item that it sat above.</p>
<p>So...</p>
<pre><code>@Component({
  template: `
    &lt;button (click)=&quot;doSomething($event); false&quot;&gt;Test&lt;/button&gt;
  `
})
export class MyComponent {
  doSomething(e) {
    e.stopPropagation();
    // do other stuff...
  }
}
</code></pre>


blocks|key|4435629|text|我刚刚签入了一个Angular+6应用程序，event.stopPropagation()在事件处理程序上工作，甚至不传递$event|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435630|(click)="doSomething()"++//+does+not+require+to+pass+$event


doSomething(){
+++//+write+any+code+here

+++event.stopPropagation();
}|code-block|syntax|javascript|4435631|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I just checked in an Angular 6 application, the event.stopPropagation() works on an event handler without even passing $event</p>

<pre><code>(click)="doSomething()"  // does not require to pass $event


doSomething(){
   // write any code here

   event.stopPropagation();
}
</code></pre>


blocks|key|4435776|text|IE+(Internet+Explorer)无法正常工作。我的测试人员可以通过单击弹出窗口后面的按钮来破坏我的模式。因此，我听到了在我的模式屏幕div上的一声点击，并强制重新聚焦在弹出按钮上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435777|<div+class="modal-backscreen"+(click)="modalOutsideClick($event)">
</div>


modalOutsideClick(event:+any)+{
+++event.preventDefault()
+++//+handle+IE+click-through+modal+bug
+++event.stopPropagation()
+++setTimeout(()+=>+{
++++++this.renderer.invokeElementMethod(this.myModal.nativeElement,+'focus')
+++},+100)
}+|code-block|syntax|javascript|4435778|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Nothing worked for IE (Internet Explorer). My testers were able to break my modal by clicking off the popup window on buttons behind it. So, I listened for a click on my modal screen div and forced refocus on a popup button.</p>

<pre><code>&lt;div class="modal-backscreen" (click)="modalOutsideClick($event)"&gt;
&lt;/div&gt;


modalOutsideClick(event: any) {
   event.preventDefault()
   // handle IE click-through modal bug
   event.stopPropagation()
   setTimeout(() =&gt; {
      this.renderer.invokeElementMethod(this.myModal.nativeElement, 'focus')
   }, 100)
} 
</code></pre>


blocks|key|4435848|text|我用过|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435849|<...+(click)="..;..;+..someOtherFunctions(mybesomevalue);+$event.stopPropagation();"+...>...|code-block|syntax|javascript|4435850|简而言之，只需使用';‘分隔其他内容/函数调用，并添加$event.stopPropagation()|4435851|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I used </p>

<pre><code>&lt;... (click)="..;..; ..someOtherFunctions(mybesomevalue); $event.stopPropagation();" ...&gt;...
</code></pre>

<p>in short just seperate other things/function calls with ';' and add $event.stopPropagation()</p>


blocks|key|4435651|text|这解决了我的问题，从预防事件被孩子触发：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435652|​|4435653|doSmth(){
++//+what+ever
}|code-block|syntax|javascript|4435654|++++++++<div+(click)="doSmth()">
++++++++++++<div+(click)="$event.stopPropagation()">
++++++++++++++++<my-component></my-component>
++++++++++++</div>
++++++++</div>|4435655|4435656|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This solved my problem, from preventign that an event gets fired by a children:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>doSmth(){
  // what ever
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div (click)="doSmth()"&gt;
            &lt;div (click)="$event.stopPropagation()"&gt;
                &lt;my-component&gt;&lt;/my-component&gt;
            &lt;/div&gt;
        &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4435823|text|尝试此指令|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435824|@Directive({
++++selector:+'[stopPropagation]'
})
export+class+StopPropagationDirective+implements+OnInit,+OnDestroy+{
++++@Input()
++++private+stopPropagation:+string+%7C+string[];

++++get+element():+HTMLElement+{
++++++++return+this.elementRef.nativeElement;
++++}

++++get+events():+string[]+{
++++++++if+(typeof+this.stopPropagation+===+'string')+{
++++++++++++return+[this.stopPropagation];
++++++++}
++++++++return+this.stopPropagation;
++++}

++++constructor(
++++++++private+elementRef:+ElementRef
++++)+{+}

++++onEvent+=+(event:+Event)+=>+{
++++++++event.stopPropagation();
++++}

++++ngOnInit()+{
++++++++for+(const+event+of+this.events)+{
++++++++++++this.element.addEventListener(event,+this.onEvent);
++++++++}
++++}

++++ngOnDestroy()+{
++++++++for+(const+event+of+this.events)+{
++++++++++++this.element.removeEventListener(event,+this.onEvent);
++++++++}
++++}
}|code-block|syntax|javascript|4435825|用法|4435826|<input+
++++type="text"+
++++stopPropagation="input"+/>

<input+
++++type="text"+
++++[stopPropagation]="['input',+'click']"+/>|4435827|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Try this directive </p>

<pre class="lang-js prettyprint-override"><code>@Directive({
    selector: '[stopPropagation]'
})
export class StopPropagationDirective implements OnInit, OnDestroy {
    @Input()
    private stopPropagation: string | string[];

    get element(): HTMLElement {
        return this.elementRef.nativeElement;
    }

    get events(): string[] {
        if (typeof this.stopPropagation === 'string') {
            return [this.stopPropagation];
        }
        return this.stopPropagation;
    }

    constructor(
        private elementRef: ElementRef
    ) { }

    onEvent = (event: Event) =&gt; {
        event.stopPropagation();
    }

    ngOnInit() {
        for (const event of this.events) {
            this.element.addEventListener(event, this.onEvent);
        }
    }

    ngOnDestroy() {
        for (const event of this.events) {
            this.element.removeEventListener(event, this.onEvent);
        }
    }
}
</code></pre>

<p>Usage</p>

<pre class="lang-html prettyprint-override"><code>&lt;input 
    type="text" 
    stopPropagation="input" /&gt;

&lt;input 
    type="text" 
    [stopPropagation]="['input', 'click']" /&gt;
</code></pre>


blocks|key|4435792|text|在函数后添加false将停止事件传播|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435793|<a+(click)="foo();+false">click+with+stop+propagation</a>|code-block|syntax|javascript|4435794|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Adding false after function will stop event propagation</p>

<pre><code>&lt;a (click)="foo(); false"&gt;click with stop propagation&lt;/a&gt;
</code></pre>


blocks|key|4435722|text|提供的大多数解决方案都是针对Angular+11以上的版本，对于Angular+11或更低版本，我找到了一个可以使用的解决方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4435723|export+class+UiButtonComponent+implements+OnInit,+OnDestroy+{

++@Input()+disabled+=+false;

++clickEmitter:+Subject<any>+=+new+Subject();

++constructor(private+elementRef:+ElementRef)+{+}

++ngOnInit():+void+{
++++this.elementRef.nativeElement.eventListeners()
++++++.map(listener+=>+this.clickEmitter.pipe(filter(event+=>+Boolean(event))).subscribe(event+=>+listener(event)));
++++this.elementRef.nativeElement.removeAllListeners();
++++this.elementRef.nativeElement.addEventListener('click',+(event)+=>+{
++++++if+(!this.disabled)+{
++++++++this.clickEmitter.next(event);
++++++}
++++});
++}

++ngOnDestroy():+void+{
++++this.clickEmitter.complete();
++}
}|code-block|syntax|javascript|4435724|我基本上将每个侦听器都放到当前组件上，并将其放在一个可观察对象上，然后，我只注册一个侦听器并在那里管理操作。|4435725|上面的示例是在给定一个布尔值变量的情况下禁用按钮上的click事件的示例。|4435726|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Most of the solutions provided are for versions above Angular 11, For Angular 11 or Below, I found a workaround that can be used:</p>
<pre><code>export class UiButtonComponent implements OnInit, OnDestroy {

  @Input() disabled = false;

  clickEmitter: Subject&lt;any&gt; = new Subject();

  constructor(private elementRef: ElementRef) { }

  ngOnInit(): void {
    this.elementRef.nativeElement.eventListeners()
      .map(listener =&gt; this.clickEmitter.pipe(filter(event =&gt; Boolean(event))).subscribe(event =&gt; listener(event)));
    this.elementRef.nativeElement.removeAllListeners();
    this.elementRef.nativeElement.addEventListener('click', (event) =&gt; {
      if (!this.disabled) {
        this.clickEmitter.next(event);
      }
    });
  }

  ngOnDestroy(): void {
    this.clickEmitter.complete();
  }
}
</code></pre>
<p>I basically take every listener to the current component and put it on an Observable, then, I register only one listener and manage there the actions.</p>
<p>The example above is an example of disabling the click event on a button given a boolean variable.</p>


<p>What is the easiest way to stop mouse events propagation in Angular ?</p>
<p>Should I pass special <code>$event</code> object and call <code>stopPropagation()</code> myself or there is some other way.</p>
<p>For example in Meteor, I can simply return <code>false</code> from event handler.</p>


Stop mouse event propagation

在Angular中停止鼠标事件传播最简单的方法是什么？我是否应该传递特殊的$event对象并自己调用stopPropagation()，或者还有其他方法。例如，在Meteor中，我可以简单地从事件处理程序返回false。

问停止鼠标事件传播
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问停止鼠标事件传播EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问停止鼠标事件传播
EN