Stop mouse event propagation

Question

What is the easiest way to stop mouse events propagation in Angular   Should I pass special  event object and call stopPropagation   myself or there is some other way  For example in Meteor  I can simply return false from event handler

User · Answer

Disable href link with JavaScript   lt a href     onclick  return yes js login     gt link lt  a gt   yes js login   function             Your code here      return false      How it should also work in TypeScript with Angular  My Version  4 1 2   Template   lt a class  list-group-item list-group-item-action   click   employeesService selectEmployeeFromList  event   false   routerLinkActive     active     routerLink      employees   1   gt      RouterLink  lt  a gt    TypeScript  public selectEmployeeFromList e         e stopPropagation        e preventDefault         console log  This onClick method should prevent routerLink from executing          return false         But it does not disable the executing of routerLink

User · Answer

If you re in a method bound to an event  simply return false    Component             template         lt a href   test html   click   doSomething    gt Test lt  a gt         export class MyComp     doSomething                   return false

User · Answer

Calling stopPropagation on the event prevents propagation     event   quot doSomething  event    event stopPropagation   quot   For preventDefault just return false  event   quot doSomething  event   false quot   Event binding allows to execute multiple statements and expressions to be executed sequentially  separated by   like in   ts files  The result of last expression will cause preventDefault to be called if falsy  So be cautious what the expression returns  even when there is only one

User · Answer

This worked for me   mycomponent component ts   action event   void     event stopPropagation        mycomponent component html    lt button mat-icon-button  click   action  event  false  gt Click me   lt button  gt

User · Answer

Adding to the answer from  AndroidUniversity  In a single line you can write it like so    lt component  click    event stopPropagation    gt  lt  component gt

User · Answer

I used    lt      click            someOtherFunctions mybesomevalue    event stopPropagation         gt       in short just seperate other things function calls with     and add  event stopPropagation

User · Answer

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    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

User · Answer

This solved my problem  from preventign that an event gets fired by a children    x000D   x000D  doSmth    x000D       what ever x000D    x000D           lt div  click   doSmth    gt  x000D               lt div  click    event stopPropagation    gt  x000D                   lt my-component gt  lt  my-component gt  x000D               lt  div gt  x000D           lt  div gt  x000D   x000D   x000D

User · Answer

The simplest is to call stop propagation on an event handler   event works the same in Angular 2  and contains the ongoing event  by it a mouse click  mouse event  etc      click   onEvent  event     on the event handler  we can there stop the propagation   onEvent event       event stopPropagation

User · Answer

I just checked in an Angular 6 application  the event stopPropagation   works on an event handler without even passing  event   click   doSomething        does not require to pass  event   doSomething          write any code here     event stopPropagation

User · Answer

Adding false after function will stop event propagation   lt a  click   foo    false  gt click with stop propagation lt  a gt

User · Answer

Try this directive    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                       Usage   lt input      type  text       stopPropagation  input    gt    lt input      type  text        stopPropagation     input    click      gt

User · Answer

I had to stopPropigation and preventDefault in order to prevent a button expanding an accordion item that it sat above   So      Component     template         lt button  click   doSomething  event   false  gt Test lt  button gt         export class MyComponent     doSomething e        e stopPropagation           do other stuff

User · Answer

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  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             Then just add it to the element you want it on   lt div click-stop-propagation gt Stop Propagation lt  div gt

[angular] Stop mouse event propagation

Disable href link with JavaScript

How it should also work in TypeScript with Angular (My Version: 4.1.2)

Examples related to angular

Examples related to dom-events

Examples related to event-propagation