9

I have directive that does something like so:

app.directive('custom', function(){
    return {
        restrict:'A',
        link: function(scope, element){
            element.bind('click', function(){
                alert('want to prevent this');
            });

        }
    }
});

yes, it's necessary to do jQuery-way binding for this case.

And now I want to stop this event(click) propagation if some condition met.

Tried to do:

  $event.stopPropagation();
  $event.preventDefault();

but it did not help.

here fiddle for example - http://jsfiddle.net/STEVER/5bfkbh7u/

4

5 回答 5

8

在您的情况下，您无法停止传播，因为单击事件发生在同一个元素上，只有两个不同的处理程序。

但是，您可以利用在控制器和指令中这是同一个事件对象的事实。ngClick所以你可以做的是为这个事件对象设置一些属性并在指令中检查它：

$scope.dosomething = function($event){
    $event.stopPropagation();
    $event.preventDefault();
    alert('here');

    if (someCondtion) {
        $event.stopNextHandler = true;
    }
}

并在指令中：

link: function(scope, element){
    element.bind('click', function(e) {
        if (e.stopNextHandler !== true) {
            alert('want to prevent this');    
        }
    });            
}

演示：http: //jsfiddle.net/5bfkbh7u/6/

于 2015-02-18T14:46:04.973 回答
2

您是否尝试过降低此指令的优先级以确保它在 ng-click 指令之后绑定？我假设事件按照它们被绑定的顺序触发，而这又由 ng-click 指令与您的指令的优先级决定。

您还需要 stopImmediatePropagation 以防止触发同一元素上的任何更多处理程序。stopPropagation 只是阻止事件传播到父处理程序。

于 2015-02-18T14:44:58.113 回答
1 
Use e.stopImmediatePropagation();
elem.bind('click', function (e) {
  if (disable(scope)){
    e.stopImmediatePropagation();
    return false;
  }

  return true;
});
于 2016-06-23T13:44:02.440 回答
0

这里没有任何事件传播，因为您有按钮，并且您必须在同一个元素上发生事件，这不是子元素的父元素，即这里没有事件冒泡或事件捕获

于 2015-02-18T14:42:41.453 回答
0

您将两个事件都附加到按钮上。注册第二个事件时检查元素

<div ng-controller="mainCtrl" custom>
    Hi! I'm the parent.
    <button ng-click="dosomething($event)">BUTTON</button>
</div>

展示柜

于 2015-02-18T14:44:26.853 回答