AngularJS:如何通过点击停止事件传播

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

本文关键字：事件 传播 何通过 AngularJS      更新时间：2023-12-29

我有这样的指令：

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();

但这无济于事。

以小提琴为例-http://jsfiddle.net/STEVER/5bfkbh7u/

在您的案例中，由于点击事件发生在同一个元素上，您无法停止传播，只有两个不同的处理程序。

但是，您可以利用以下事实：这是控制器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/

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

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

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

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

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

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

Showcase

相关文章：