AngularJS: 如何停止 ng-click 的事件传播？

Question

我有这样的指令：

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

        }
    }
});

是的，有必要对这种情况进行 jQuery 方式绑定。

现在我想在满足某些条件时停止此事件（点击）传播。

尝试过：

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

但这并没有帮助。

此处 fiddle 例如 - http://jsfiddle.net/STEVER/5bfkbh7u/

Answer 1

这里没有任何事件传播，因为你有按钮，你必须在同一元素上发生事件，这不会转到子元素的父元素，即这里没有事件冒泡或事件捕获

Answer 2

您将这两个事件附加到按钮。注册第二个事件时勾选元素

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

Showcase

Answer 3

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

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

Answer 4

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

但是您可以利用这样一个事实，即在控制器 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/

Answer 5

Use e.stopImmediatePropagation();
elem.bind('click', function (e) {
  if (disable(scope)){
    e.stopImmediatePropagation();
    return false;
  }

  return true;
});

AngularJS: 如何停止 ng-click 的事件传播？

AngularJS: How to stop event propagation from ng-click?

javascript

event-propagation

angularjs

angularjs-directive