CODEWITHSUNDEEP
javascripthtmlangularjsdom-events
Ninja
Ninja

Reputation: 1052

Ng-Click vs Href: Which takes priority?

If you have a tag like:

   <a href="/hello" ng-click="func()"> Hello </a>

Which would take priority, ng-click or href?

Upvotes: 4

Views: 2854

Answers (2)

PSL
PSL

Reputation: 123739

There is no case of priority here between href and click event (unless you are talking about the priority of default action of anchor and click event). ng-click is a directive which just underneath registers event handler to the DOM element and when you click on it, click event is getting triggered. The default action (browser's) of an anchor is to navigate to the url (if present, absolute or relative) specified in the href. And click of an anchor triggers default action to occur unless it is prevented by event.preventDefault() or return false(won't work with handlers registered with angular) (which does not work with angular), which is probably what you are look for.

In angular you can pass the event from ng-click as ng-click="func($event)" and you can use that in your handler or you can even use it inline.

From W3c

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.

Upvotes: 3

malifa
malifa

Reputation: 8165

Actually i just tried it my self and just post my result, because the other answer doesn't really clear it up:

The href will execute before the ng-click has the chance to be called. For example:

$scope.redirect = function(){
     window.location.href = 'http://www.stackoverflow.com';
};
<a href="http://www.google.com" ng-click="redirect()">Redirect</a>

This will lead to Google instead of stackoverflow.

Upvotes: 1

Related Questions