CODEWITHSUNDEEP
angularjsangularjs-directive
Matthew Rygiel
Matthew Rygiel

Reputation: 1257

Multiple directives with same event binding on element

I have two directives with the same name from two separate modules. One is a third party module and I can't make a change to it. It binds a mousewheel event to the element.

I wrote my own directive which is trying to undo this binding. 

angular.module('myModule').directive('ngViewport', [function () {
    return {
        restrict: 'A',
        priority: -1,
        link: function ($scope, element, attrs) {
            element.bind("mousewheel DOMMouseScroll", function (event) {
                event.stopPropagation();
                return true;
            });
        }
    };
}]);

This does not work. I also tried using the "unbind" option on the element and it also did not work.

Upvotes: 1

Views: 2560

Answers (1)

asgoth
asgoth

Reputation: 35829

Take a look at event.stopImmediatePropagation():

In addition to keeping any additional handlers on an element from being executed, this method also stops the bubbling by implicitly calling event.stopPropagation(). To simply prevent the event from bubbling to ancestor elements but allow other event handlers to execute on the same element, we can use event.stopPropagation() instead.

So...

...
element.bind("mousewheel DOMMouseScroll", function (event) {
  event.stopImmediatePropagation();
  return true;
});
...

Upvotes: 1

Related Questions