$ event.stopPropagation（）は実行されますが、親イベントはまだ実行されます

Question

他の場所にリンクする<a>タグ内のボタンがあります。ボタンをクリックすると親タグのリンクがトリガーされないようにしたい。私は$event.stopPropagation()を使ってみましたが、うまくいかないようです。ここ

は私のhtmlです：

<div class="column" ng-repeat="eventObj in events" ng-repeat-dimmer> 
     <a href="#/sample-event/{{eventObj.eventId}}"> 
     //divs 
       <h2>{{eventObj.eventName}}</h2> 
       <div>{{eventObj.eventStart | date}} - {{eventObj.eventEnd | date}}</div> 
       <h5>{{eventObj.eventVenue}}</h5> 
       <button ng-click="deleteEvent(eventObj,$event)"></button> 
     //divs 
     <img class="ui image" src="assets/img/sampleevent.png"/> 
     </a> 
    </div> 

と私のコントローラでの機能：

$scope.deleteEvent = function(delEvent,$event){ 
      $event.stopPropagation(); 
      console.log($event.isPropagationStopped()) 
      $scope.targetEvent = delEvent; 
      if(confirm("Note: This will permanently delete the event and games associated with it.")==true){ 
       EventService.deleteEvent($scope.targetEvent) 
       .then(function(){ 
        EventService.getEvents() 
        .then(function(events){ 
         $scope.events = events; 
        }); 
       }) 
       window.location.reload(); 
      } 
     } 

私はここで何をしますか？

Answer 1

使用event.preventDefaultではなく、ここにハイパーリンクがデフォルトのイベントではないイベントリスナーであるトリガー、たとえばそれが動作しない理由として

<script> 
function clickFunction(e) 
{ 
alert('click'); 

    e.preventDefault(); 
} 
</script> 
<a href="http://google.com" target="_blank"> 
    <button onclick="clickFunction(event);"> 
    test 
    </button> 
</a> 

https://jsfiddle.net/3Lrr24qu/

です。 event.stopPropagationが動作するリンク上でhrefの代わりにonclickがあった場合は、以下のドキュメントを参照してください。 https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-captureから

：

1.2.3。イベントバブリング

バブリングと指定されたイベントは、最初は非バブリングイベントと同じイベントフローで処理されます。イベントはターゲットEventTargetに送出され、トリガーされたすべてのイベントリスナーが送出されます。その後、バブリングイベントは、EventTargetの親チェーンを上に追いかけることによって検出された追加のイベントリスナーをトリガーし、連続する各EventTargetに登録されたイベントリスナーをチェックします。この上向き伝播は、文書を含むまで継続されます。キャプチャとして登録されたEventListenerは、このフェーズでは起動されません。イベントターゲットからツリーの上部までのEventTargetsのチェーンは、イベントの最初のディスパッチの前に決定されます。イベント処理中にツリーに変更が生じた場合、イベントフローはツリーの初期状態に基づいて処理されます。

イベントハンドラは、EventインターフェイスのstopPropagationメソッドを呼び出すことで、それ以上のイベントの伝播を防ぐことができます。いずれかのEventListenerがこのメソッドを呼び出すと、現在のEventTarget上の追加のEventListenerがすべてトリガーされますが、バブリングはそのレベルで終了します。それ以上のバブリングを防ぐためにstopPropagationを呼び出す必要は1回だけです。

1.2.4。イベントキャンセル

一部のイベントはキャンセル可能と指定されています。これらのイベントの場合、DOM実装には通常、イベントに関連付けられたデフォルトのアクションがあります。この例は、Webブラウザのハイパーリンクです。ユーザーがハイパーリンクをクリックすると、デフォルトのアクションでそのハイパーリンクがアクティブになります。これらのイベントを処理する前に、実装はイベントを受け取るよう登録されたイベントリスナーをチェックし、それらのリスナーにイベントをディスパッチする必要があります。これらのリスナーは、実装のデフォルトアクションを取り消すか、デフォルトアクションを続行するかを選択できます。ブラウザのハイパーリンクの場合、アクションをキャンセルすると、ハイパーリンクがアクティブにならないという結果になります。

キャンセルは、イベントのpreventDefaultメソッドを呼び出すことによって行われます。イベントフローのフェーズ中に1つ以上のEventListenerがpreventDefaultを呼び出すと、デフォルトのアクションはキャンセルされます。

異なる実装では、それぞれのイベントに関連付けられた独自のデフォルトアクションがあればそれを指定します。DOMはこれらのアクションを指定しようとしません。