Así que tengo un botón que está dentro de una etiqueta <a> que se vincula a otra ubicación. Cuando hago clic en el botón, lo quiero para que no active el enlace en la etiqueta principal. He intentado usar $event.stopPropagation() pero parece que no funciona.
aquí está mi 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>y la función en mi controlador:
$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(); } }¿Qué hago aquí?
Use event.preventDefault en su lugar, aquí hay un ejemplo
<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/
En cuanto a por qué no funciona, la activación de un hipervínculo es un evento predeterminado, no un detector de eventos. Si tuviera un onclick en lugar de href en el enlace, event.stopPropagation funcionaría, consulte la documentación a continuación.
De https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture :
1.2.3. Evento burbujeante
Los eventos que se designan como burbujeantes procederán inicialmente con el mismo flujo de eventos que los eventos sin burbujeo. El evento se envía a su objetivo EventTarget y se activan todos los detectores de eventos que se encuentran allí. Luego, los eventos burbujeantes activarán cualquier detector de eventos adicional que se encuentre siguiendo la cadena principal de EventTarget hacia arriba, comprobando si hay detectores de eventos registrados en cada EventTarget sucesivo. Esta propagación ascendente continuará hasta el Documento inclusive. Los EventListeners registrados como capturadores no se activarán durante esta fase. La cadena de EventTargets desde el destino del evento hasta la parte superior del árbol se determina antes del envío inicial del evento. Si se producen modificaciones en el árbol durante el procesamiento de eventos, el flujo de eventos continuará según el estado inicial del árbol.
Cualquier controlador de eventos puede optar por evitar una mayor propagación de eventos llamando al método stopPropagation de la interfaz de eventos. Si algún EventListener llama a este método, se activarán todos los EventListener adicionales en el EventTarget actual, pero cesará el burbujeo en ese nivel. Solo se requiere una llamada a stopPropagation para evitar más burbujas.
1.2.4. Cancelación de evento
Algunos eventos se especifican como cancelables. Para estos eventos, la implementación de DOM generalmente tiene una acción predeterminada asociada con el evento. Un ejemplo de esto es un hipervínculo en un navegador web. Cuando el usuario hace clic en el hipervínculo, la acción predeterminada generalmente es activar ese hipervínculo. Antes de procesar estos eventos, la implementación debe verificar si hay detectores de eventos registrados para recibir el evento y enviar el evento a esos detectores. Estos oyentes luego tienen la opción de cancelar la acción predeterminada de la implementación o permitir que continúe la acción predeterminada. En el caso del hiperenlace en el navegador, la cancelación de la acción tendría como consecuencia la no activación del hiperenlace.
La cancelación se logra llamando al método preventDefault del evento. Si uno o más EventListeners llaman a preventDefault durante cualquier fase del flujo de eventos, se cancelará la acción predeterminada.
Diferentes implementaciones especificarán sus propias acciones predeterminadas, si las hay, asociadas con cada evento. El DOM no intenta especificar estas acciones.