[angularjs] How to preventDefault on anchor tags?

Let's say I have an anchor tag such as

<a href="#" ng-click="do()">Click</a>

How can I prevent the browser from navigating to # in AngularJS ?

An alternative might be:

<span ng-click="do()">Click</span>

HTML

here pure angularjs: near to ng-click function you can write preventDefault() function by seperating semicolon

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">Click me</a>

JS

$scope.do = function() {
    alert("do here anything..");
}

(or)

you can proceed this way, this is already discussed some one here.

HTML

<a href="#" ng-click="do()">Click me</a>

JS

$scope.do = function(event) {
    event.preventDefault();
    event.stopPropagation()
}

if you never want to go to href... you should change your markup and use a button not an anchor tag because semantically it's not an anchor or a link. Inversely if you have a button that does some checks and then redirects it should be a link / anchor tag and not a button... for SEO purposes as well testing [insert test suite here].

for links that you only want to redirect conditionally like prompting to save changes, or acknowledge dirty state... you should use ng-click="someFunction($event)" and in someFunction on your validationError preventDefault and or stopPropagation.

also just because you can doesn't mean you should. javascript:void(0) worked well back in the day... but because of the nefarious hackers/crackers browsers flag apps/sites that use javascript within an href... see no reason to ducktype above..

it's 2016 since 2010 should be no reason anywhere to use links that act like buttons... if you still have to support IE8 and below you need to re-evaluate your place of business.

Although Renaud gave a great solution

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

I personally found you also need $event.stopPropagation() in some cases to avoid some of the side effects

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

will be my solution

I need a presence of href attribute's value for degradation (when js is switched off), so I can't use empty href attribute (or "#"), but the code above did not work for me, because i need an event (e) variable. I created my own directive:

angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});

In HTML:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>

This is what I always do. Works like a charm!

<a href ng-click="do()">Click</a>

/* NG CLICK PREVENT DEFAULT */

app.directive('ngClick', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

You can pass the $event object to your method, and call $event.preventDefault() on it, so that the default processing will not occur:

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

I prefer to use directives for this kind of thing. Here's an example

<a href="#" ng-click="do()" eat-click>Click Me</a>

And the directive code for eat-click:

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

Now you can add the eat-click attribute to any element and it will get preventDefault()'ed automagically.

Benefits:

1. You don't have to pass the ugly $event object into your do() function.
2. Your controller is more unit testable because it doesn't need to stub out the $event object

Since you are making a web app why do you need links?

Swap your anchors to buttons!

<button ng-click="do()"></button>

Try this option which I can see is not yet listed above :

<a href="" ng-click="do()">Click</a>

Borrowing from tennisgent's answer. I like that you don't have to create a custom directive to add on all the links. However, I couldnt get his to work in IE8. Here's what finally worked for me (using angular 1.0.6).

Notice that 'bind' allows you to use jqLite provided by angular so no need to wrap with full jQuery. Also required the stopPropogation method.

.directive('a', [
    function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {

                elem.bind('click', function(e){
                    if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
])

The safest way to avoid events on an href would be to define it as

<a href="javascript:void(0)" ....>

You can disable url redirection inside $location's Html5Mode to achieve the objective. You can define it inside the specific controller used for the page. Something like this:

app.config(['$locationProvider', function ($locationProvider) {_x000D_
    $locationProvider.html5Mode({_x000D_
        enabled: true,_x000D_
        rewriteLinks: false,_x000D_
        requireBase: false_x000D_
    });_x000D_
}]);

If you are using Angular 8 or more you can create a directive:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[preventDefault]'
})
export class PreventDefaultDirective {

  @HostListener("click", ["$event"])
  public onClick(event: any): void
  {
    console.log('click');
    debugger;
      event.preventDefault();
  }

}

On your anchor tag on the component you can wire it like this:

  <a ngbDropdownToggle preventDefault class="nav-link dropdown-toggle" href="#" aria-expanded="false" aria-haspopup="true" id="nav-dropdown-2">Pages</a>

App Module should have its declaration:

import { PreventDefaultDirective } from './shared/directives/preventdefault.directive';


@NgModule({
  declarations: [
    AppComponent,
    PreventDefaultDirective

Lot of answers seem to be overkill. FOR ME , this works

 <a ng-href="#" ng-click="$event.preventDefault();vm.questionContainer($index)">{{question.Verbiage}}</a>

The easiest solution I have found is this one :

<a href="#" ng-click="do(); $event.preventDefault()">Click</a>

ng-click="$event.preventDefault()"

Or if you need inline then you can do this:

<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>

You can do as follows

1.Remove href attribute from anchor(a) tag

2.Set pointer cursor in css to ng click elements

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }

What you should do, is omit the href attribute entirely.

If you look at the source code for the a element directive (which is a part of the Angular core), it states at line 29 - 31:

if (!element.attr(href)) {
    event.preventDefault();
}

Which means Angular already is solving the issue of links without a href. The only issue you still have is the css problem. You can still apply the pointer style to anchors that have ng-clicks, e.g.:

a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}

So, you could even make your site more accessible by marking real links with a subtle, different styling then links that perform functions.

Happy coding!

if still relevant:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

So reading through these answers, @Chris still has the most "correct" answer, I suppose, but it has one problem, it doesn't show the "pointer"....

So here are two ways to solve this problem without needing to add a cursor:pointer style:

1. Use javascript:void(0) instead of #:

   <a href="javascript:void(0)" ng-click="doSomething()">Do Something</a>
   

2. Use $event.preventDefault() in the ng-click directive (so you don't junk up your controller with DOM-related references):

   <a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a>
   

Personally I prefer the former over the latter. javascript:void(0) has other benefits that are discussed here. There is also discussion of "unobtrusive JavaScript" in that link which is frighteningly recent, and doesn't necessarily directly apply to an angular application.

According to the docs for ngHref you should be able to leave off the href or do href="".

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

I would go with:

<a ng-click="do()">Click</a>

• because according to the docs you should be able to leave of the href and then Angular will handle the prevent default for you!

Whole this prevent default thing has been confusing to me, so I have created a JSFiddle there illustrate when and where Angular is preventing default.

The JSFiddle is using Angular's a directive - so it should be EXACTLY the same. You can see the source code here: a tag source code

I hope this will help clarification for some.

I would have liked to post the doc to ngHref but I can't because of my reputation.

I ran into this same issue when using anchors for an angular bootstrap drop down. The only solution I found that avoided unwanted side effects (ie. the drop down not closing because of using preventDefault()) was to use the following:

 <a href="javascript:;" ng-click="do()">Click</a>