onClick / Nested Divs

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Mike
    #1

    onClick / Nested Divs

    Can someone please explain how onclick works with nested, absolutely
    positioned div containers? I would expect, when several divs are on
    top of one another, clicking on them would trigger an onclick event
    for each div. But it's not working that way. Take a look at the
    attached file. Clicking in the center of the "orange" div, I would
    think, would trigger an alert for all five of the divs. In fact, it
    doesn't even trigger one for the "orange" div.

    =============== ======

    <html><head>
    <script type="text/javascript">
    function show(id){ alert( "clicked on " + id); }
    </script>
    <style type="text/css">
    #gray {position:relat ive;height:300p x;width:300px;m argin-
    right:auto;marg in-left:auto;borde r:thin solid #666;z-index:10}
    #blue {position:absol ute;top:20px;le ft:20px;height: 100px;width:
    100px;margin-right:auto;marg in-left:auto;borde r:thin solid blue;z-
    index:20}
    #red {position:absol ute;top:0;left: 0;height:100px; width:100px;mar gin-
    right:auto;marg in-left:auto;borde r:thin solid red;z-index:30}
    #green {position:absol ute;top:5px;lef t:5px;height:30 px;width:
    30px;margin-right:auto;marg in-left:auto;borde r:thin solid green;z-
    index:40}
    #orange {position:absol ute;top:10px;le ft:10px;height: 30px;width:
    30px;margin-right:auto;marg in-left:auto;borde r:thin solid orange;z-
    index:50}
    </style>
    </head><body>
    <div id="gray" onclick="show(' gray')">
    <div id="blue" onclick="show(' blue')">
    <div id="green" onclick="show(' green')"></div>
    <div id="orange" onclick="show(' orange')"></div>
    </div>
    <div id="red" onclick="show(' red')"></div>
    </div>
    </body></html>
    Tags: None
    • pr
      #2
      Re: onClick / Nested Divs

      pr wrote:
      Mike wrote:
      >Can someone please explain how onclick works with nested, absolutely
      >positioned div containers? I would expect, when several divs are on
      >top of one another, clicking on them would trigger an onclick event
      >for each div. But it's not working that way. Take a look at the
      >attached file. Clicking in the center of the "orange" div, I would
      >think, would trigger an alert for all five of the divs. In fact, it
      >doesn't even trigger one for the "orange" div.
      [...]
      If no div contained any other div, you would get the results I guess you
      anticipate.
      >
      PS: re-reading your post, I see you anticipate something else. To have a
      click event bubble through all the divs you would need to structure your
      HTML so:

      <div id="gray" onclick="show(' gray')">
      <div id="blue" onclick="show(' blue')">
      <div id="green" onclick="show(' green')">
      <div id="orange" onclick="show(' orange')">
      <div id="red" onclick="show(' red')"></div>
      </div>
      </div>
      </div>
      </div>

      CSS positioning has no effect on the manner in which events bubble, but
      it may, as I have shown, prevent the initial element receiving the event.

        Comment

        • Mike
          #3
          Re: onClick / Nested Divs

          Thanks!

          The application I'm working on, actually has over 100 div containers,
          so nesting them all inside one another seems impractical maybe even
          problematic. After reading through your thoughts and playing around a
          bit more, I think a better approach for my needs will be an image map
          to trigger the events.

          Thanks again, it was a great help!

          Mike
          PS: re-reading your post, I see you anticipate something else. To have a
          click event bubble through all the divs you would need to structure your
          HTML so:
          CSS positioning has no effect on the manner in which events bubble, but
          it may, as I have shown, prevent the initial element receiving the event.

            Comment

            Previous template Next
            Working...