Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    147
    Thanks
    35
    Thanked 0 Times in 0 Posts

    On click with div

    How can I use onclick with the <div> tag?

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Code:
    <div onclick="alert('div was clicked');">Click me</div>

  • Users who have thanked bullant for this post:

    maxhud (04-06-2011)

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    If you use onclick with a div, be aware that clicks bubble- you will be handling clicks from any child nodes in the div as well as from the div.

  • Users who have thanked mrhoo for this post:

    maxhud (04-06-2011)

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    If you use onclick with a div, be aware that clicks bubble- you will be handling clicks from any child nodes in the div as well as from the div.
    You can stop the bubbling though so that the onclick fires only on the parent div and not the child elements as well.

  • Users who have thanked bullant for this post:

    maxhud (04-06-2011)

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by mrhoo View Post
    If you use onclick with a div, be aware that clicks bubble- you will be handling clicks from any child nodes in the div as well as from the div.
    That's for IE. In old Mozilla model events are capturing (from parent to child) not bubbling (from child to parent). W3C standard model says now that there are 2 phases: first the capturing, and when the event reaches the "bottom", the bubbling phase is starting backwards
    So that, yes, events can be stopped, but in the bubbling phase:
    Code:
    function doSmth(e){
    var e = e||window.event;
    e.cancelBubble = true;//IE model
    if (e.stopPropagation) e.stopPropagation();//W3C model
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    maxhud (04-06-2011)

  • #6
    Regular Coder
    Join Date
    Mar 2011
    Posts
    147
    Thanks
    35
    Thanked 0 Times in 0 Posts
    bubbling shouldn't be an issue.

    thanks for the help guys!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •