So I have a button that is inside an <a> tag that links to another location. When I click the button I want it so that it does not trigger the link in the parent tag. I have tried using $event.stopPropagation() but it does not seem to work.
here is my 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>
and the function in my 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();
}
}
What do I do here?
Use event.preventDefault instead, here is an example
<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/
As to why it doesn't work, triggering hyperlink is a default event not an event listener. If you had an onclick instead of the href on the link the event.stopPropagation would work, see the documentation below.
From https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture :
1.2.3. Event bubbling
Events which are designated as bubbling will initially proceed with the same event flow as non-bubbling events. The event is dispatched to its target EventTarget and any event listeners found there are triggered. Bubbling events will then trigger any additional event listeners found by following the EventTarget's parent chain upward, checking for any event listeners registered on each successive EventTarget. This upward propagation will continue up to and including the Document. EventListeners registered as capturers will not be triggered during this phase. The chain of EventTargets from the event target to the top of the tree is determined before the initial dispatch of the event. If modifications occur to the tree during event processing, event flow will proceed based on the initial state of the tree.
Any event handler may choose to prevent further event propagation by calling the stopPropagation method of the Event interface. If any EventListener calls this method, all additional EventListeners on the current EventTarget will be triggered but bubbling will cease at that level. Only one call to stopPropagation is required to prevent further bubbling.
1.2.4. Event cancelation
Some events are specified as cancelable. For these events, the DOM implementation generally has a default action associated with the event. An example of this is a hyperlink in a web browser. When the user clicks on the hyperlink the default action is generally to active that hyperlink. Before processing these events, the implementation must check for event listeners registered to receive the event and dispatch the event to those listeners. These listeners then have the option of canceling the implementation's default action or allowing the default action to proceed. In the case of the hyperlink in the browser, canceling the action would have the result of not activating the hyperlink.
Cancelation is accomplished by calling the Event's preventDefault method. If one or more EventListeners call preventDefault during any phase of event flow the default action will be canceled.
Different implementations will specify their own default actions, if any, associated with each event. The DOM does not attempt to specify these actions.