Question

我有指令做类似的事情：

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

        }
    }
});

是的，为这种情况做jQuery-way绑定是必要的。

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

试图做：

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

但它没有帮助。

这里举个例子 - http://jsfiddle.net/STEVER/5bfkbh7u/

Answer 1

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

但是，您可以利用这是控制器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 2

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

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

Answer 3

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

  return true;
});

Answer 4

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

Answer 5

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

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

Showcase

AngularJS：如何从ng-click停止事件传播？

5 个答案: