web-dev-qa-db-ja.com

AngularJS：ng-clickからのイベント伝播を停止する方法は？

私はそのようなことをするディレクティブを持っています：

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/

javascriptangularjsangularjs-directiveevent-propagation
8
Stepan Suvorov

あなたの場合、クリックイベントが同じ要素で発生するため、伝播を停止することはできません。ハンドラーは2つだけです。

ただし、これがコントローラーngClickとディレクティブの両方でsameイベントオブジェクトであるという事実を活用できます。したがって、実行できることは、このイベントオブジェクトにいくつかのプロパティを設定し、ディレクティブでそれを確認することです。

$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/

7
dfsq

このディレクティブの優先度を下げて、ng-clickディレクティブの後にバインドされることを確認しましたか？イベントはバインドされた順序で発生すると想定します。これは、ng-clickディレクティブとディレクティブの優先度によって決まります。

同じ要素でこれ以上ハンドラーが起動しないようにするには、stopImmediatePropagationも必要です。 stopPropagationは、イベントが親ハンドラーに伝播するのを防ぐだけです。

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

  return true;
});
1
Manik Thakur

ボタンがあり、同じ要素でイベントを実行する必要があるため、ここにはイベントの伝播はありません。これは子要素の親要素には移動しません。つまり、イベントのバブリングやイベントのキャプチャはここにはありません。

0
A.B

両方のイベントをボタンに添付します。 2番目のイベントを登録するときに要素を確認してください

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

ショーケース

0
Mx.