AngularJS ng-click stopPropagation

$event.stoppropagation() angularjs not working
angularjs ng-change preventdefault
ng blur stoppropagation
angular stoppropagation
angularjs event preventdefault
stoppropagation vs preventdefault
ng-click return false
event.stoppropagation is not a function

I have a click Event on a table row and in this row there is also a delete Button with a click Event. When i click the delete button the click Event on the row is also fired.

Here is my code.

<tbody>
  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>{{user.email}}</td>
    <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
  </tr>
</tbody>

How can I prevent that the showUser Event is fired when i click the delete Button in the table cell?

ngClick directive (as well as all other event directives) creates $event variable which is available on same scope. This variable is a reference to JS event object and can be used to call stopPropagation():

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER

AngularJS – $event.stopPropagation() and $event.preventDefault , Now, let's see what is event bubbling, event bubbling means if you have a number of elements enclosed one inside the other, then clicking on� AngularJs ng-click stopPropagation : Sometimes we need to stopPropagation of ng-click event, It is very simple to stop propagation in AngularJs. Here in this tutorial we are going to explain how you can stop Propagation in AngularJs. You can also use our online editor to edit and run the code online. AngularJs ng-click stopPropagation Example

An addition to Stewie's answer. In case when your callback decides whether the propagation should be stopped or not, I found it useful to pass the $event object to the callback:

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>

And then in the callback itself, you can decide whether the propagation of the event should be stopped:

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

AngularJS ng-click stopPropagation, To prevent that the showUser event is fired when you click the delete button in the table cell so the problem here is with ngClick directive which� So it’s not returning the return value of the function used in ng-click. So we have two ways of solving this. So we have two ways of solving this. The first solution is to pass the $event parameter to your function and call both stopPropagation() and preventDefault() :

I wrote a directive which lets you limit the areas where a click has effect. It could be used for certain scenarios like this one, so instead of having to deal with the click on a case by case basis you can just say "clicks won't come out of this element".

You would use it like this:

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>

Keep in mind that this would prevent all clicks on the last cell, not just the button. If that's not what you want you may want to wrap the button like this:

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>

Here is the directive's code:

angular.module('awesome', []).directive('isolateClick', function() {
    return {
        link: function(scope, elem) {
            elem.on('click', function(e){
                e.stopPropagation();
            });
        }
   };
});

AngularJS: Stopping event propagation on ng-click, The code defining the ngClick directive looks like this (in AngularJS to your function and call both stopPropagation() and preventDefault():. StopPropagation : In simple words stopPropagation stops event bubbling and event capturing. Now, let’s see what is event bubbling , event bubbling means if you have a number of elements enclosed one inside the other, then clicking on the innermost element starts a chain of event originating from innermost event towards outer i.e events gets

In case that you're using a directive like me this is how it works when you need the two data way binding for example after updating an attribute in any model or collection:

angular.module('yourApp').directive('setSurveyInEditionMode', setSurveyInEditionMode)

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // In order to work with stopPropagation and two data way binding
        // if you don't use scope.$apply in my case the model is not updated in the view when I click on the element that has my directive
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('inside the directive')
        });
      });
    }
  }
}

Now, you can easily use it in any button, link, div, etc. like so:

<button set-survey-in-edition-mode >Edit survey</button>

Stop Event Propagation on click in AngularJS, In Angular, ng-click scope exposes the $event property, which is the DOM event being propagated. While stopPropagation will help to stop the propagation of the event to the parent, event. In Angular, ng-click scope exposes the $event property, which is the DOM event being propagated. While stopPropagation will help to stop the propagation of the event to the parent, event.preventDefault will stop the default action of the event from happening.

<ul class="col col-double clearfix">
 <li class="col__item" ng-repeat="location in searchLocations">
   <label>
    <input type="checkbox" ng-click="onLocationSelectionClicked($event)" checklist-model="selectedAuctions.locations" checklist-value="location.code" checklist-change="auctionSelectionChanged()" id="{{location.code}}"> {{location.displayName}}
   </label>



$scope.onLocationSelectionClicked = function($event) {
      if($scope.limitSelectionCountTo &&         $scope.selectedAuctions.locations.length == $scope.limitSelectionCountTo) {
         $event.currentTarget.checked=false;
      }
   };

How to prevent button's default behavior on ng-click event in , How to prevent button's default behavior on ng-click event in AngularJS. By Murat Kazanova | August 28, 2013. 0 Comment. In order to prevent the button's� AngularJS ng-click stopPropagation (4) I have a click Event on a table row and in this row there is also a delete Button with a click Event. When i click the delete button the click Event on the row is also fired. Here is my code.

jQuery event.stopPropagation() Method, Example. Stop the click event from bubbling to parent elements: $("span").click( function(event){ event.stopPropagation(); alert("The span element was clicked."); }); You can register another directive on top of ng-click which amends the default behaviour of ng-click and stops the event propagation. This way you wouldn't have to add $event.stopPropagation by hand.

javascript — AngularJS ng-click stopPropagation, AngularJS ng-click stopPropagation. Ich habe ein Klickereignis in einer Tabellenzeile und in dieser Zeile gibt es auch einen L�schknopf mit einem Klickereignis. AngularJS ng-click stopPropagation. Hot Network Questions Determine the Sharpness of a Word Can you set the target directory for force:source:retrieve operations?

Adding an `ng-click` to a `a` tag always trigger a page reload when , stopPropagation();") Even if ng-click is empt !{html5mode == true} div(ng-view ) script(src="//code.angularjs.org/snapshot/angular.js")� The ng-click on the a is there so we can stopPropagation so the parent ng-click is not executed. Otherwise, the game detail would open in a new tab, but the original tab would also navigate to the game detail. When html5Mode = false everything works fine.

Comments
  • I could not figure out if this is available in the controller code - $scope.$event did not seem to work. Any ideas?
  • @event object is created inside the ng-click directive, and it is available to you to pass it on to your ng-click handler function: ng-click="deleteUser(user.id, $event)".
  • Thanks, kind of figured that one, but I think it still stinks :)
  • I think that it's an antipattern to execute multiple expressions like this. Why not just pass $event as a third argument to deleteUser() and then stopPropagation() inside that function?
  • I had to add $event.preventDefault() too, otherwise calling $event.stopPropagation() was redirecting me to the root of my app when clicking the button.
  • this is more elegant than execute multiple expressions in html attribute, thanks
  • Remember to put the '$event' argument, in the html ng-click directive. I stumbled on that at first.
  • For an immediate stop better use $event.stopImmediatePropagation()
  • So simple, yet so ignored. I was looking at the chosen answer and thinking "really? THIS ugly?". Didn't even realize to pass it as a parameter. Really nice.
  • Nice! I've renamed your directive to ngClick, as I actually never want to propagate an already handled event.
  • Be careful with that. Some other plugins might actually want to listen those clicks. If you use tooltips that close when clicking outside they may never close, because the outside clicks are not being propagated to the body.
  • That's a good point, but this problem would happen with your directive too. Maybe I should just add a property like ignoreNgClick=true to the event and handle it... somehow. Ideally, in the original ngClick directive, but modifying it sounds dirty.
  • Yes it does, that's why I wouldn't use this directive unless I really need it. Once I even had to make another directive to continue the click propagation due to this very reason. So I had a an isolate-click directive, then a couple parents up I had another continue-click directive. This way the click was only skipped for the middle elements.
  • Would you add some explanation of why you think this answers the question?
  • It kind of answers the question. It shows how to pass in the event to the callback which is a more than what the initial question figured out.