9

次のようなディレクティブがあります。

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/

4

5 に答える 5

8

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

ただし、これがコントローラーとディレクティブの両方で同じイベント オブジェクトであるという事実を利用できます。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

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

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

ショーケース

于 2015-02-18T14:44:26.853 に答える