jQuery DIV click with anchors

Question

To make click-able divs  I do    lt div class  clickable  url  http   google com  gt      blah blah  lt  div gt    and then      div clickable   click  function         window location     this  attr  url          I don t know if this is the best way  but it works perfectly with me  except for one issue  If the div contains a click-able element  such as      lt a href       gt   and the user clicks on the hyperlink  both the hyperlink and div s-clickable are called  This is especially a problem when the anchor tag is referring to a javascript AJAX function  which executes the AJAX function AND follows the link in the  url  attribute of the div   Anyway around this

User · Accepted Answer

If you return  false  from your function it ll stop the event bubbling  so only your first event handler will get triggered  ie  your anchor will not see the click       div clickable   click  function         window location     this  attr  url        return false        See event preventDefault   vs  return false for details on return false vs  preventDefault

User · Answer

div clickable   click  function event        window location     this  attr  url        event preventDefault

User · Answer

Using a custom url attribute makes the HTML invalid  Although that may not be a huge problem  the given examples are neither accessible  Not for keyboard navigation and not in cases when JavaScript is turned off  or blocked by some other script   Even Google will not find the page located at the specified url  not via this route at least   It s quite easy to make this accessible though  Just make sure there s a regular link inside the div that points to the url  Using JavaScript jQuery you add an onclick to the div that redirects to the location specified by the link s href attribute  Now  when JavaScript doesn t work  the link still does and it can even catch the focus when using the keyboard to navigate  and you don t need custom attributes  so your HTML can be valid      I wrote a jQuery plugin some time ago that does this  It also adds classNames to the div  or any other element you want to make clickable  and the link so you can alter their looks with CSS when the div is indeed clickable  It even adds classNames that you can use to specify hover and focus styles   All you need to do is specify the element s  you want to make clickable and call their clickable   method  in your case that would be    div clickable  clickable     For downloading   documentation see the plugin s page  jQuery  clickable  mdash  jLix

User · Answer

div clickable   click  function event        window location     this  attr  url        event preventDefault

User · Answer

div clickable   click  function event        window location     this  attr  url        event preventDefault

User · Answer

div clickable   click  function event        window location     this  attr  url        event preventDefault

User · Answer

Using a custom url attribute makes the HTML invalid  Although that may not be a huge problem  the given examples are neither accessible  Not for keyboard navigation and not in cases when JavaScript is turned off  or blocked by some other script   Even Google will not find the page located at the specified url  not via this route at least   It s quite easy to make this accessible though  Just make sure there s a regular link inside the div that points to the url  Using JavaScript jQuery you add an onclick to the div that redirects to the location specified by the link s href attribute  Now  when JavaScript doesn t work  the link still does and it can even catch the focus when using the keyboard to navigate  and you don t need custom attributes  so your HTML can be valid      I wrote a jQuery plugin some time ago that does this  It also adds classNames to the div  or any other element you want to make clickable  and the link so you can alter their looks with CSS when the div is indeed clickable  It even adds classNames that you can use to specify hover and focus styles   All you need to do is specify the element s  you want to make clickable and call their clickable   method  in your case that would be    div clickable  clickable     For downloading   documentation see the plugin s page  jQuery  clickable  mdash  jLix

User · Answer

lt div class  info  gt      lt h2 gt Takvim lt  h2 gt      lt a href  item-list php  gt  Click Me   lt  a gt   lt  div gt      document  delegate  div info    click   function        window location     this  find  a   attr  href

User · Answer

I know that if you were to change that to an href you d do       a link1   click function event      event preventDefault         div link1   show        whatever else you want to do       so if you want to keep it with the div  I d try       div clickable   click function event      event preventDefault      window location     this  attr  url

User · Answer

I know that if you were to change that to an href you d do       a link1   click function event      event preventDefault         div link1   show        whatever else you want to do       so if you want to keep it with the div  I d try       div clickable   click function event      event preventDefault      window location     this  attr  url

User · Answer

lt div class  info  gt      lt h2 gt Takvim lt  h2 gt      lt a href  item-list php  gt  Click Me   lt  a gt   lt  div gt      document  delegate  div info    click   function        window location     this  find  a   attr  href

User · Answer

I know that if you were to change that to an href you d do       a link1   click function event      event preventDefault         div link1   show        whatever else you want to do       so if you want to keep it with the div  I d try       div clickable   click function event      event preventDefault      window location     this  attr  url

User · Answer

I know that if you were to change that to an href you d do       a link1   click function event      event preventDefault         div link1   show        whatever else you want to do       so if you want to keep it with the div  I d try       div clickable   click function event      event preventDefault      window location     this  attr  url

[javascript] jQuery DIV click, with anchors

Examples related to javascript

Examples related to jquery