AngularJS - delete event handler of parent element

Question

Code:

<table>
 <tr ng-click="function()">
  <td id="1"></td>
  <td></td>
 <tr>
</table>

How to delete click-handler from td with id = 1? Thanks

This question about something like "stop propagation". I want to click td with id=1 and not fire click event for parent <tr> — Fyodor Khruschov
– Fyodor Khruschov, Commented Oct 22, 2013 at 21:25

Adam · Accepted Answer · 2013-10-22 21:28:01Z

1

I'm going to take this to mean that you don't want to fire the click event handler in td id=1, but you do want every other td in that row to still fire it.

ng-click wires up regular javascript event handlers. Since you are listening for the click event on the tr element, you simply have to stop the event from propagating when it fires on a child element to ahiceve this.

It would probably be best written as a directive

app.directive('disableClick', function() {
  return function(scope, elem) {
    elem.on('click', function(e) {
      // e.stopPropagation(); or for IE, window.event.cancelBubble
      return false; // My assumption is that jqLite supports this, jQuery definitely does.
    });
  }
});

HTML

<td disable-click id="1"></td>

The click event will no longer bubble up to the TR.

answered Oct 22, 2013 at 21:28

Adam

1,1437 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yeraycaballero · Accepted Answer · 2013-10-22 21:34:29Z

The proper way to do it, it's in a directive. I found one that it could help you Here you go an example click no bubble

angular.forEach( 'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter   mouseleave'.split(' '),
    function(name) {

        var directiveName = name.replace('my-' , '');

        app.directive( directiveName, ['$parse', function($parse) {
            return function(scope, element, attr) {
                var fn = $parse(attr[directiveName]);
                element.bind(lowercase(name), function(event) {
                event.stopPropagation();
                scope.$apply(function() {
                fn(scope, {$event:event});
            });
        });
    };
}]);

I hope it helps

Collectives™ on Stack Overflow

AngularJS - delete event handler of parent element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related