preventDefault on an a tag

Question

I have some HTML and jQuery that slides a div up and down to show or hide  it when a link is clicked    lt ul class  product-info  gt     lt li gt       lt a href     gt YOU CLICK THIS TO SHOW HIDE lt  a gt       lt div class  toggle  gt         lt p gt CONTENT TO SHOW HIDE lt  p gt       lt  div gt     lt  li gt   lt  ul gt       div toggle   hide       ul product-info li a   click function event       this  next  div   slideToggle 200       My question is  How do I use preventDefault   to stop the link acting as a link and adding     to the end of my URL  amp  jumping to the top of the page   I can t figure out the right syntax  I just keep getting an error saying      preventDefault   is not a function

User · Accepted Answer

Try something like      div toggle   hide       ul product-info li a   click function event        event preventDefault          this  next  div   slideToggle 200         Here is the page about that in the jQuery documentation

User · Answer

You can make use of return false  from the event call to stop the event propagation  it acts like an event preventDefault    negating it  Or you can use javascript void 0  in href attribute to evaluate the given expression and then return undefined to the element   Returning the event when it s called    lt a href    onclick  return false   gt       lt  a gt    Void case    lt a href  javascript void 0    gt       lt  a gt    You can see more about in  What  39 s the effect of adding void 0  for href and   39 return false  39  on click event listener of anchor tag

User · Answer

This is a non-JQuery solution I just tested and it works     lt html lang  en  gt   lt head gt   lt script type  text javascript  gt  addEventListener  load  function        var links  document getElementsByTagName  a        for  var i 0 i lt links length i             links i  addEventListener  click  function e           alert  NOPE   I won t take you there haha              prevent event action         e preventDefault                            lt  script gt   lt  head gt   lt body gt   lt div gt   lt ul gt       lt li gt  lt a href  http   www google com  gt Google lt  a gt  lt  li gt       lt li gt  lt a href  http   www facebook com  gt Facebook lt  a gt  lt  li gt       lt p id  p1  gt Paragraph lt  p gt   lt  ul gt   lt  div gt   lt p gt By Jefrey Bulla lt  p gt   lt  body gt   lt  html gt

User · Answer

Set the href attribute as href  javascript       lt ul class  product-info  gt     lt li gt      lt a href  javascript    gt YOU CLICK THIS TO SHOW HIDE lt  a gt     lt div class  toggle  gt       lt p gt CONTENT TO SHOW HIDE lt  p gt     lt  div gt    lt  li gt   lt  ul gt

User · Answer

Yet another way of doing this in Javascript using inline onclick  IIFE  event and preventDefault      lt a href     onclick   function e  e preventDefault      event   gt Click Me lt  a gt

User · Answer

Alternatively  you could just return false from the click event        div toggle   hide        ul product-info li a   click function event       this  next  div   slideToggle 200     return false          Which would stop the A-Href being triggered    Note however  for usability reasons  in an ideal world that href should still go somewhere  for the people whom want to open link in new tab

User · Answer

lt ul class  product-info  gt     lt li gt       lt a href  javascript void 0    gt YOU CLICK THIS TO SHOW HIDE lt  a gt         lt div class  toggle  gt           lt p gt CONTENT TO SHOW HIDE lt  p gt         lt  div gt     lt  li gt   lt  ul gt    Use      javascript void 0

User · Answer

Alternatively  you could just return false from the click event        div toggle   hide        ul product-info li a   click function event       this  next  div   slideToggle 200     return false          Which would stop the A-Href being triggered    Note however  for usability reasons  in an ideal world that href should still go somewhere  for the people whom want to open link in new tab

User · Answer

Alternatively  you could just return false from the click event        div toggle   hide        ul product-info li a   click function event       this  next  div   slideToggle 200     return false          Which would stop the A-Href being triggered    Note however  for usability reasons  in an ideal world that href should still go somewhere  for the people whom want to open link in new tab

User · Answer

This is a non-JQuery solution I just tested and it works     lt html lang  en  gt   lt head gt   lt script type  text javascript  gt  addEventListener  load  function        var links  document getElementsByTagName  a        for  var i 0 i lt links length i             links i  addEventListener  click  function e           alert  NOPE   I won t take you there haha              prevent event action         e preventDefault                            lt  script gt   lt  head gt   lt body gt   lt div gt   lt ul gt       lt li gt  lt a href  http   www google com  gt Google lt  a gt  lt  li gt       lt li gt  lt a href  http   www facebook com  gt Facebook lt  a gt  lt  li gt       lt p id  p1  gt Paragraph lt  p gt   lt  ul gt   lt  div gt   lt p gt By Jefrey Bulla lt  p gt   lt  body gt   lt  html gt

User · Answer

Set the href attribute as href  javascript       lt ul class  product-info  gt     lt li gt      lt a href  javascript    gt YOU CLICK THIS TO SHOW HIDE lt  a gt     lt div class  toggle  gt       lt p gt CONTENT TO SHOW HIDE lt  p gt     lt  div gt    lt  li gt   lt  ul gt

User · Answer

Why not just do it in css    Take out the  href  attribute in your anchor tag   lt ul class  product-info  gt     lt li gt       lt a gt YOU CLICK THIS TO SHOW HIDE lt  a gt       lt div class  toggle  gt         lt p gt CONTENT TO SHOW HIDE lt  p gt       lt  div gt     lt  li gt   lt  ul gt    In your css     a      cursor  pointer

User · Answer

After several operations  when the page should finally go to  lt a href quot     quot  gt  link you can do the following  jQuery  quot a quot   click function e       var self   jQuery this       var href   self attr  href        e preventDefault           needed operations      window location   href

User · Answer

It s suggested that you do not use return false  as 3 things occur as a result    event preventDefault    event stopPropagation    Stops callback execution and returns immediately when called    So in this type of situation  you should really only use event preventDefault     Archive of article - jQuery Events  Stop  Mis Using Return False

User · Answer

You can make use of return false  from the event call to stop the event propagation  it acts like an event preventDefault    negating it  Or you can use javascript void 0  in href attribute to evaluate the given expression and then return undefined to the element   Returning the event when it s called    lt a href    onclick  return false   gt       lt  a gt    Void case    lt a href  javascript void 0    gt       lt  a gt    You can see more about in  What  39 s the effect of adding void 0  for href and   39 return false  39  on click event listener of anchor tag

User · Answer

If stopping the propagation of the event doesn t bother you  just use   return false    at the end of your handler  In jQuery it prevents the default behaviour and it stop the event bubbling

User · Answer

If stopping the propagation of the event doesn t bother you  just use   return false    at the end of your handler  In jQuery it prevents the default behaviour and it stop the event bubbling

User · Answer

Why not just do it in css    Take out the  href  attribute in your anchor tag   lt ul class  product-info  gt     lt li gt       lt a gt YOU CLICK THIS TO SHOW HIDE lt  a gt       lt div class  toggle  gt         lt p gt CONTENT TO SHOW HIDE lt  p gt       lt  div gt     lt  li gt   lt  ul gt    In your css     a      cursor  pointer

User · Answer

Alternatively  you could just return false from the click event        div toggle   hide        ul product-info li a   click function event       this  next  div   slideToggle 200     return false          Which would stop the A-Href being triggered    Note however  for usability reasons  in an ideal world that href should still go somewhere  for the people whom want to open link in new tab

User · Answer

After several operations  when the page should finally go to  lt a href quot     quot  gt  link you can do the following  jQuery  quot a quot   click function e       var self   jQuery this       var href   self attr  href        e preventDefault           needed operations      window location   href

User · Answer

It s suggested that you do not use return false  as 3 things occur as a result    event preventDefault    event stopPropagation    Stops callback execution and returns immediately when called    So in this type of situation  you should really only use event preventDefault     Archive of article - jQuery Events  Stop  Mis Using Return False

User · Answer

lt ul class  product-info  gt     lt li gt       lt a href  javascript void 0    gt YOU CLICK THIS TO SHOW HIDE lt  a gt         lt div class  toggle  gt           lt p gt CONTENT TO SHOW HIDE lt  p gt         lt  div gt     lt  li gt   lt  ul gt    Use      javascript void 0

User · Answer

Yet another way of doing this in Javascript using inline onclick  IIFE  event and preventDefault      lt a href     onclick   function e  e preventDefault      event   gt Click Me lt  a gt

[javascript] preventDefault() on an <a> tag

Examples related to javascript

Examples related to jquery