How can I disable HREF if onclick is executed

Question

I have an anchor with both HREF and ONCLICK attributes set  If clicked and Javascript is enabled  I want it to only execute ONCLICK and ignore HREF  Likewise  if Javascript is disabled or unsupported  I want it to follow the HREF URL and ignore ONCLICK  Below is an example of what I m doing  which would execute the JS and follow the link concurrently  usually the JS is executed and then the page changes     lt A HREF  http   example com no-js-login  ONCLICK  yes js login    gt Log in lt  A gt    what s the best way to do this   I m hoping for a Javascript answer  but I ll accept any method as long as it works  especially if this can be done with PHP  I ve read  a href link executes and redirects page before javascript onclick function is able to finish  already  but it only delays HREF  but doesn t completely disable it  I m also looking for something much simpler

User · Answer

This might help  No JQuery needed   lt a href     some-relative-link file   onclick  this href    https   docs google com viewer url   this href  this onclick         target   blank  gt    This code does the following  Pass the relative link to Google Docs Viewer   Get the full link version of the anchor by this href  open the link the the new window    So in your case this might work    lt a href     some-relative-link file   onclick  this href    javascript   console log  something has stopped the link       target   blank  gt

User · Answer

I solved a situation where I needed a template for the  element that would handle alternatively a regular URL or a javascript call  where the js function needs a reference to the calling  element  In javascript   this  works as a self reference only in the context of a form element  e g   a button  I didn t want a button  just the apperance of a regular link   Examples    lt a onclick  http   blahblah  href  http   blahblah  target   blank  gt A regular link lt  a gt   lt a onclick  javascript myFunc   this   return false  href  javascript myFunc   this      target   blank  gt javascript with self reference lt  a gt    The href and onClick attributes have the same values  exept I append  return false  on onClick when it s a javascript call  Having  return false  in the called function did not work

User · Answer

It s simpler if you pass an event parameter like this    lt a href     onclick  yes js login event    gt link lt  a gt    function yes js login e        e stopImmediatePropagation

User · Answer

Try using javascript void 0  as follows-  lt a href  quot javascript void 0  quot  onclick  quot     quot  gt Text lt  a gt

User · Answer

yes js login   function                 Your code here          return false          If you return false it should prevent the default action  going to the href    Edit  Sorry that doesn t seem to work  you can do the following instead    lt a href  http   example com no-js-login  onclick  yes js login    return false   gt Link lt  a gt

User · Answer

In my case  I had a condition when the user click the  a  element   The condition was   If other section had more than ten items  then the user should be not redirected to other page   If other section had less than ten items  then the user should be redirected to other page   The functionality of the  a  elements depends of the other component  The code within click event is the follow   var elementsOtherSection   document querySelectorAll   vehicle-item   length  if  elementsOtherSection gt  10        return true   else       event preventDefault         return false

User · Answer

Simply disable default browser behaviour using preventDefault and pass the event within your HTML    lt a href  foo onclick  yes js login event  gt Lorem ipsum lt  a gt   yes js login   function e      e preventDefault

User · Answer

lt a href  http   www google com  class  ignore-click  gt Test lt  a gt    with jQuery    lt script gt          ignore-click   click function            return false          lt  script gt    with JavaScript   lt script gt          for  var i   0  i  lt  document getElementsByClassName  ignore-click   length  i                  document getElementsByClassName  ignore-click   i  addEventListener  click   function  event                    event preventDefault                    return false                             lt  script gt    You assign class  ignore-click to as many elements you like and clicks on those elements will be ignored

User · Answer

You can use the first un-edited solution  if you put return first in the onclick attribute    lt a href  https   example com no-js-login  onclick  return yes js login     gt Log in lt  a gt   yes js login   function             Your code here      return false      Example  https   jsfiddle net FXkgV 289

User · Answer

You can use this simple code    lt a href    onclick  return false   gt add new action lt  a gt  lt br gt

[javascript] How can I disable HREF if onclick is executed?

Examples related to javascript

Examples related to html

Examples related to onclick

Examples related to anchor

Examples related to href