Loading ...
Sorry, an error occurred while loading the content.

Receiving events in overlapping elements

Expand Messages
  • randomjuju
    Hi there! Suppose you have two overlapping DIVs in a page. They both have registered handlers for click events via YAHOO.util.Event.addListener. Without
    Message 1 of 5 , Jul 24, 2006
    View Source
    • 0 Attachment
      Hi there!

      Suppose you have two overlapping DIVs in a page. They both have
      registered handlers for click events via YAHOO.util.Event.addListener.
      Without modification, only the DIV on top (as determined by Z order)
      will receive the event. Is there any way to set things up so
      both DIVs receive the event?

      Thanks!

      -Jon

      Sample code:

      <html>
      <head>
      <title>Event order test</title>

      <style type="text/css">
      div
      {
      position: absolute;

      border: solid black 1px;
      width: 128px;
      height: 128px;

      background-color: #dddddd;
      opacity: 0.75;

      text-align: right;
      }

      #one
      {
      left: 16px;
      top: 72px;
      }

      #two
      {
      left: 80px;
      top: 136px;
      }
      </style>

      <script type="text/javascript"
      src="../yui/build/yahoo/yahoo.js"></script>
      <script type="text/javascript" src="../yui/build/dom/dom.js"></script>
      <script type="text/javascript"
      src="../yui/build/event/event.js"></script>

      <script type="text/javascript">
      function init()
      {
      YAHOO.util.Event.addListener('one', 'mousedown', handleClick);
      YAHOO.util.Event.addListener('two', 'mousedown', handleClick);
      }

      function handleClick(event)
      {
      alert('Click on ' + YAHOO.util.Event.getTarget(event).id + '.');
      return true;
      }
      </script>
      </head>

      <body onload="init();">
      <h1>Event order test</h1>

      <div id="one">1</div>
      <div id="two">2</div>
      </body>
      </html>
    • Adam Moore
      ... Jon, event propagation happens through the hierarchy of the DOM, not z-index. I m not sure you can do exactly what you are asking for. One approach would
      Message 2 of 5 , Jul 25, 2006
      View Source
      • 0 Attachment
        On Tue, Jul 25, 2006 at 03:42:27AM -0000, randomjuju wrote:
        > Hi there!
        >
        > Suppose you have two overlapping DIVs in a page. They both have
        > registered handlers for click events via YAHOO.util.Event.addListener.
        > Without modification, only the DIV on top (as determined by Z order)
        > will receive the event. Is there any way to set things up so
        > both DIVs receive the event?
        >
        > Thanks!
        >
        > -Jon

        Jon, event propagation happens through the hierarchy of the DOM, not
        z-index. I'm not sure you can do exactly what you are asking for.

        One approach would be to bind the handler to a common parent element
        rather than both of your overlapping elements, then evaluate whether or not
        the click happened over one element, the other, or both. This can be done
        with a combination of YAHOO.util.Event.getTarget (to determine if the click
        happened on either "one" or "two), YAHOO.util.Event.getXY (to get the
        position of the click), and YAHOO.util.Region (and YAHOO.util.Point to
        determine if the click location overlaps with the region occupied by either
        of the elements.)

        -Adam
      • randomjuju
        Having done a lot of homework on the subject, I m inclined to agree that the common parent/region approach is the way to go. Thanks very much -- I appreciate
        Message 3 of 5 , Jul 25, 2006
        View Source
        • 0 Attachment
          Having done a lot of homework on the subject, I'm inclined to agree
          that the common parent/region approach is the way to go.

          Thanks very much -- I appreciate it!

          -Jon

          --- In ydn-javascript@yahoogroups.com, Adam Moore <adamoore@...> wrote:
          >
          > On Tue, Jul 25, 2006 at 03:42:27AM -0000, randomjuju wrote:
          > > Hi there!
          > >
          > > Suppose you have two overlapping DIVs in a page. They both have
          > > registered handlers for click events via YAHOO.util.Event.addListener.
          > > Without modification, only the DIV on top (as determined by Z order)
          > > will receive the event. Is there any way to set things up so
          > > both DIVs receive the event?
          > >
          > > Thanks!
          > >
          > > -Jon
          >
          > Jon, event propagation happens through the hierarchy of the DOM, not
          > z-index. I'm not sure you can do exactly what you are asking for.
          >
          > One approach would be to bind the handler to a common parent element
          > rather than both of your overlapping elements, then evaluate whether
          or not
          > the click happened over one element, the other, or both. This can
          be done
          > with a combination of YAHOO.util.Event.getTarget (to determine if
          the click
          > happened on either "one" or "two), YAHOO.util.Event.getXY (to get the
          > position of the click), and YAHOO.util.Region (and YAHOO.util.Point to
          > determine if the click location overlaps with the region occupied by
          either
          > of the elements.)
          >
          > -Adam
          >
        • randomjuju
          Hi there! I just wanted to toss a quick clarification; it s true that the DOM primarily determines the order of event propagation. It s ALSO true that z-order
          Message 4 of 5 , Jul 28, 2006
          View Source
          • 0 Attachment
            Hi there!

            I just wanted to toss a quick clarification; it's true that the DOM
            primarily determines the order of event propagation. It's ALSO true
            that z-order is the determining factor for two overlapping elements at
            the same DOM level.

            Thanks again!

            -Jon

            --- In ydn-javascript@yahoogroups.com, "randomjuju" <jon.chambers@...>
            wrote:
            >
            > Having done a lot of homework on the subject, I'm inclined to agree
            > that the common parent/region approach is the way to go.
            >
            > Thanks very much -- I appreciate it!
            >
            > -Jon
            >
            > --- In ydn-javascript@yahoogroups.com, Adam Moore <adamoore@> wrote:
            > >
            > > On Tue, Jul 25, 2006 at 03:42:27AM -0000, randomjuju wrote:
            > > > Hi there!
            > > >
            > > > Suppose you have two overlapping DIVs in a page. They both have
            > > > registered handlers for click events via
            YAHOO.util.Event.addListener.
            > > > Without modification, only the DIV on top (as determined by Z
            order)
            > > > will receive the event. Is there any way to set things up so
            > > > both DIVs receive the event?
            > > >
            > > > Thanks!
            > > >
            > > > -Jon
            > >
            > > Jon, event propagation happens through the hierarchy of the DOM, not
            > > z-index. I'm not sure you can do exactly what you are asking for.
            > >
            > > One approach would be to bind the handler to a common parent element
            > > rather than both of your overlapping elements, then evaluate whether
            > or not
            > > the click happened over one element, the other, or both. This can
            > be done
            > > with a combination of YAHOO.util.Event.getTarget (to determine if
            > the click
            > > happened on either "one" or "two), YAHOO.util.Event.getXY (to get the
            > > position of the click), and YAHOO.util.Region (and YAHOO.util.Point to
            > > determine if the click location overlaps with the region occupied by
            > either
            > > of the elements.)
            > >
            > > -Adam
            > >
            >
          • randomjuju
            For the curious, I did exactly this and it worked out just fine. Thanks! -Jon ... YAHOO.util.Event.addListener. ... order)
            Message 5 of 5 , Aug 20, 2006
            View Source
            • 0 Attachment
              For the curious, I did exactly this and it worked out just fine.

              Thanks!

              -Jon

              --- In ydn-javascript@yahoogroups.com, "randomjuju" <jon.chambers@...>
              wrote:
              >
              > Having done a lot of homework on the subject, I'm inclined to agree
              > that the common parent/region approach is the way to go.
              >
              > Thanks very much -- I appreciate it!
              >
              > -Jon
              >
              > --- In ydn-javascript@yahoogroups.com, Adam Moore <adamoore@> wrote:
              > >
              > > On Tue, Jul 25, 2006 at 03:42:27AM -0000, randomjuju wrote:
              > > > Hi there!
              > > >
              > > > Suppose you have two overlapping DIVs in a page. They both have
              > > > registered handlers for click events via
              YAHOO.util.Event.addListener.
              > > > Without modification, only the DIV on top (as determined by Z
              order)
              > > > will receive the event. Is there any way to set things up so
              > > > both DIVs receive the event?
              > > >
              > > > Thanks!
              > > >
              > > > -Jon
              > >
              > > Jon, event propagation happens through the hierarchy of the DOM, not
              > > z-index. I'm not sure you can do exactly what you are asking for.
              > >
              > > One approach would be to bind the handler to a common parent element
              > > rather than both of your overlapping elements, then evaluate whether
              > or not
              > > the click happened over one element, the other, or both. This can
              > be done
              > > with a combination of YAHOO.util.Event.getTarget (to determine if
              > the click
              > > happened on either "one" or "two), YAHOO.util.Event.getXY (to get the
              > > position of the click), and YAHOO.util.Region (and YAHOO.util.Point to
              > > determine if the click location overlaps with the region occupied by
              > either
              > > of the elements.)
              > >
              > > -Adam
              > >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.