question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to stop event propogation

See original GitHub issue

In the GT codebase, we have a common pattern <ng-click-stop-propogation>, which provides the same API as <ng-click>, but is implemented as:

(node as Element).onClick.listen((event) {
      scope.apply(expression);
      event.preventDefault();
      event.stopPropagation();
    });

We would like a similar pattern in Angular2.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

7reactions
mheverycommented, May 26, 2015

I think this is already support in three ways:

  1. returning false causes preventDefault() to run. ie: <div (click)="doSomething(); false">
  2. calling it manually: <button (click)="doSomething(); $event.stopPropagation()">
  3. One can always implement the same directive in NG2 as:
@Directive({
  selector: `click-stop-propagation`
  events: 'stopClick($event)'
})
class ClickStopPropagation {
  stopClick(event:Event) {
    event.preventDefault();
    event. stopPropagation();
  }
}

Then use as:

<button (click)="doSomething()" click-stop-propagation>

Request

Do you think the above is not sufficient? If so, how would you imagine the syntax to work?

3reactions
HMhugomeirelescommented, Jul 4, 2018

I think is this.

<input (keydown)="onKeydown($event)">

onKeydown(event) {
event.preventDefault();
  if (event.key === "Enter") {
    console.log(event);
  }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Event Bubbling and Event Catching in JavaScript and React
To prevent other events on the same element from firing, use event.stopImmediatePropagation() instead. It will stop both parents and the same ...
Read more >
What's the difference between event.stopPropagation and ...
event.stopPropagation() – It prevents the event from propagating (or “bubbling up”) the DOM. Stops callback execution and returns immediately when called.
Read more >
Using stopPropagation() to Stop Event Bubbling in JavaScript
Essentially, stopPropagation() does what the name describes: it stops the propagation of a bubbling event from going further up the tree of ...
Read more >
How to stop event propagation with inline onclick attribute in ...
Use HTML DOM stopPropagation() method to stop the event from propagating with inline onclick attribute which is described below:.
Read more >
Understanding Event Propagation in JavaScript - MakeUseOf
You can stop the propagation of events using the stopPropagation() method. The addEventListener() method accepts an event name and a handler ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found