Menu
Using a Backbone.js View, say I want to include the following events:
events: { 'click a': 'link', 'click': 'openPanel' } How can I avoid openPanel to be fired when I click on a link. What I want is to have a clickable box which will trigger an action, but this box can have elements which should trigger other actions, and not the parent action. Think for example Twitter.com, and links in Tweets/right hand panel.
778
To stop an event from further propagation in the capturing and bubbling phases, you call the Event. stopPropation() method in the event handler. Note that the event. stopPropagation() method doesn't stop any default behaviors of the element e.g., link click, checkbox checked.
Try with (click)="$event. stopPropagation()" .
In the capturing phase, events propagate from the Window down through the DOM tree to the target node. For example, if the user clicks a hyperlink, that click event would pass through the <html> element, the <body> element, and the <p> element containing the link.
stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
I've been using e.stopImmediatePropagation(); in order to keep the event from propagating. I wish there was a shorter way to do this. I would like return false; but that is due to my familiarity with jQuery
75
The JQuery preventDefault method would also be a good option.
window.LocationViewLI = Backbone.View.extend({ tagName: "li", template: _.template('<a href="/locations/<%= id %>"><%= name %></a>'), events: { "click a": "handleClick" }, handleClick: function(event) { event.preventDefault(); console.log("LocationViewLI handleClick", this.model.escape("name") ); // debugger; }, ... If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
