How to preventDefault on anchor tags

Question

Let s say I have an anchor tag such as   lt a href     ng-click  do    gt Click lt  a gt    How can I prevent the browser from navigating to   in AngularJS

User · Answer

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

User · Answer

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    Use javascript void 0  instead of      lt a href  javascript void 0   ng-click  doSomething    gt Do Something lt  a gt   Use  event preventDefault   in the ng-click directive  so you don t junk up your controller with DOM-related references     lt a href   dontGoHere  ng-click  doSomething     event preventDefault    gt Do Something lt  a gt     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

User · Answer

NG CLICK PREVENT DEFAULT     app directive  ngClick   function          return           link  function  scope  element  attributes                element click function  event                    event preventDefault                    event stopPropagation

User · Answer

Try this option which I can see is not yet listed above     lt a href    ng-click  do    gt Click lt  a gt

User · Answer

I would go with    lt a ng-click  do    gt Click lt  a gt     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

User · Answer

According to the docs for ngHref you should be able to leave off the href or do href       lt input ng-model  value    gt  lt br   gt   lt a id  link-1  href ng-click  value   1  gt link 1 lt  a gt   link  don t reload  lt br   gt   lt a id  link-2  href    ng-click  value   2  gt link 2 lt  a gt   link  don t reload  lt br   gt   lt a id  link-4  href    name  xx  ng-click  value   4  gt anchor lt  a gt   link  don t reload  lt br   gt   lt a id  link-5  name  xxx  ng-click  value   5  gt anchor lt  a gt   no link  lt br   gt

User · Answer

The safest way to avoid events on an href would be to define it as    lt a href  javascript void 0        gt

User · Answer

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

User · Answer

Lot of answers seem to be overkill   FOR ME   this works     lt a ng-href     ng-click   event preventDefault   vm questionContainer  index   gt   question Verbiage   lt  a gt

User · Answer

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

User · Answer

if still relevant    lt a ng-click  unselect  event     gt        scope unselect   function  event      event preventDefault     event stopPropagation

User · Answer

ng-click   event preventDefault

User · Answer

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

User · Answer

Or if you need inline then you can do this    lt a href     ng-click  show    show   event preventDefault    gt Click to show lt  a gt

User · Answer

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

User · Answer

The easiest solution I have found is this one      lt a href     ng-click  do     event preventDefault    gt Click lt  a gt

User · Answer

Since you are making a web app why do you need links   Swap your anchors to buttons    lt button ng-click  do    gt  lt  button gt

User · Answer

I prefer to use directives for this kind of thing  Here s an example   lt a href     ng-click  do    eat-click gt Click Me lt  a gt    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    You don t have to pass the ugly  event object into your do   function  Your controller is more unit testable because it doesn t need to stub out the  event object

User · Answer

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    x000D   x000D  app config    locationProvider   function   locationProvider    x000D       locationProvider html5Mode   x000D          enabled  true  x000D          rewriteLinks  false  x000D          requireBase  false x000D          x000D       x000D   x000D   x000D

User · Answer

Although Renaud gave a great solution   lt a href     ng-click  do     event preventDefault    gt Click lt  a gt     I personally found you also need  event stopPropagation   in some cases to avoid some of the side effects   lt a href     ng-click  do     event preventDefault     event stopPropagation     gt      Click lt  a gt    will be my solution

User · Answer

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    lt a data-click-prevent  true  href   users sign up  ng-click  openSignUpModal    gt Sign up lt  a gt

User · Answer

An alternative might be    lt span ng-click  do    gt Click lt  span gt

User · Answer

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     lt a href  javascript    ng-click  do    gt Click lt  a gt

User · Answer

This is what I always do  Works like a charm    lt a href ng-click  do    gt Click lt  a gt

User · Answer

You can pass the  event object to your method  and call  event preventDefault   on it  so that the default processing will not occur    lt a href     ng-click  do  event   gt Click lt  a gt      then in your controller do  event  method  event preventDefault

User · Answer

UPDATE   I ve since changed my mind on this solution   After more development and time spent working on this  I believe a better solution to this problem is to do the following    lt a ng-click  myFunction    gt Click Here lt  a gt    And then update your css to have an extra rule   a ng-click       cursor  pointer      Its much more simple and provides the exact same functionality and is much more efficient   Hope that might be helpful to anyone else looking up this solution in the future     The following is my previous solution  which I am leaving here just for legacy purposes   If you are having this problem a lot  a simple directive that would fix this issue is the following   app directive  a   function         return           restrict   E           link  function scope  elem  attrs                if attrs ngClick    attrs href           attrs href                           elem on  click   function e                       e preventDefault                                                            It checks all anchor tags   lt a gt  lt  a gt   to see if their href attribute is either an empty string      or a hash       or there is an ng-click assignment   If it finds any of these conditions  it catches the event and prevents the default behavior   The only down side is that it runs this directive for all anchor tags   So if you have a lot of anchor tags on the page and you only want to prevent the default behavior for a small number of them  then this directive isn t very efficient   However  I almost always want to preventDefault  so I use this directive all over in my AngularJS apps

User · Answer

HTML   here pure angularjs  near to ng-click function you can write preventDefault   function by seperating semicolon   lt a href     ng-click  do     event preventDefault     event stopPropagation     gt Click me lt  a gt    JS   scope do   function         alert  do here anything           or   you can proceed this way  this is already discussed some one here   HTML   lt a href     ng-click  do    gt Click me lt  a gt    JS   scope do   function event        event preventDefault        event stopPropagation

[angularjs] How to preventDefault on anchor tags?

Examples related to angularjs

Examples related to preventdefault