$ event.stopPropagation() wird ausgeführt, aber das übergeordnete Ereignis wird weiterhin ausgeführt.

Question

So habe ich eine Schaltfläche, die sich in einem <a>-Tag befindet, das mit einem anderen Speicherort verknüpft ist. Wenn ich auf die Schaltfläche Ich möchte es klicken, damit es die Verknüpfung in dem übergeordneten Tag nicht auslöst. Ich habe versucht, $event.stopPropagation() zu verwenden, aber es scheint nicht zu funktionieren.

hier ist mein 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> 

und die Funktion in meinem Controller:

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

Was kann ich hier tun?

Answer 1

Verwenden Event.preventDefault statt, hier ist ein Beispiel

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

Wie, warum es nicht funktioniert, Hyperlink Auslösung ist ein Standard-Ereignis nicht ein Ereignis-Listener. Wenn Sie einen onclick anstelle der href auf dem Link hatten, würde die event.stopPropagation funktionieren, siehe die unten stehende Dokumentation.

Von https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture:

1.2.3. Event bubbling

Ereignisse, die als Bubbling bezeichnet werden, werden zunächst mit demselben Ereignisfluss wie nicht-bubbling Ereignisse fortfahren. Das Ereignis wird an sein Ziel-EventTarget gesendet und alle dort gefundenen Ereignis-Listener werden ausgelöst. Sprudelnde Ereignisse lösen dann alle zusätzlichen Ereignis-Listener aus, indem sie der übergeordneten Kette des EventTargets nach oben folgen und dabei nach Event-Listenern suchen, die in jedem nachfolgenden EventTarget registriert sind. Diese Aufwärtsbewegung wird bis einschließlich des Dokuments fortgesetzt. EventListener, die als Capturers registriert sind, werden während dieser Phase nicht ausgelöst. Die Kette der EventTargets vom Ereignisziel bis zum Anfang des Baums wird vor dem ersten Versand des Ereignisses festgelegt. Wenn während der Ereignisverarbeitung Änderungen am Baum auftreten, wird der Ereignisfluss basierend auf dem Anfangszustand des Baums fortgesetzt.

Jeder Event-Handler kann die weitere Ereignisweiterleitung durch Aufrufen der stopPropagation-Methode der Event-Schnittstelle verhindern. Wenn ein EventListener diese Methode aufruft, werden alle zusätzlichen EventListener auf dem aktuellen EventTarget ausgelöst, aber die Blasenbildung wird auf dieser Ebene beendet. Es ist nur ein Aufruf von stopPropagation erforderlich, um weiteres Blubbern zu verhindern.

1.2.4. Ereignisaufhebung

Einige Ereignisse sind als stornierbar gekennzeichnet. Für diese Ereignisse verfügt die DOM-Implementierung in der Regel über eine Standardaktion, die dem Ereignis zugeordnet ist. Ein Beispiel dafür ist ein Hyperlink in einem Webbrowser. Wenn der Benutzer auf den Hyperlink klickt, wird standardmäßig dieser Hyperlink aktiviert. Vor der Verarbeitung dieser Ereignisse muss die Implementierung nach Ereignis-Listenern suchen, die für den Empfang des Ereignisses registriert sind, und das Ereignis an diese Listener senden. Diese Listener haben dann die Option, die Standardaktion der Implementierung abzubrechen oder es der Standardaktion zu erlauben, fortzufahren. Im Fall des Hyperlinks im Browser würde das Abbrechen der Aktion dazu führen, dass der Hyperlink nicht aktiviert wird.

Die Stornierung erfolgt durch Aufruf der preventDefault-Methode des Events. Wenn ein oder mehrere EventListener preventDefault während einer beliebigen Phase des Ereignisablaufs aufrufen, wird die Standardaktion abgebrochen.

Verschiedene Implementierungen geben ggf. eigene Standardaktionen für jedes Ereignis an.Das DOM versucht nicht, diese Aktionen anzugeben.