SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with events

    I believe this should be an easy one.

    I have 2 positioned layers one on top of the other.
    I want an event to take place when the mouse is over the bottom layer, even if that means that the mouse will be over the top layer also.
    If i use something like:
    Code:
    <div id="bottom" onmouseover="al()">This is my bottom div</div>
    It works without a problem.
    But if i remove the inline event handler, and i try to capture the event in a script in the head of my document, it doesn't work anymore. It works only if the mouse is DIRECTLY ontop of the bottom div, but if the top div is "between" the bottom div and the mouse pointer it doesn't work.
    Here are the examples:
    http://64.247.55.97/eventsproblem1.html this works
    http://64.247.55.97/eventsproblem2.html doesn't work

    In the second page, to activate the event you have to point directly on the bottom div (yellow area), otherwise it doesn't work.

  2. #2
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I'm not sure why, I have an idea but tried typing it and it didn't work so I found this link that might help.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first example works because "top" is a child element of "bottom" and so its events bubble up to its parent.

    The second example is different because you're adding the event listener to document.

  4. #4
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the second example the top is also a child element of bottom.

    What is the solution in this case if i don't want to have the event handler inline?

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following are simplified versions (no nn4 support) of two functions from one of my libraries.
    Code:
    function xAddEventListener(ele,eventType,eventListener,useCapture) {
      eventType=eventType.toLowerCase();
      var eh="ele.on"+eventType+"=eventListener";
      if(ele.addEventListener) ele.addEventListener(eventType,eventListener,useCapture);
      else if(ele.attachEvent) ele.attachEvent("on"+eventType,eventListener);
      else if(ele.captureEvents) {
        if(useCapture||(eventType.indexOf('mousemove')!=-1)) {
          ele.captureEvents(eval("Event."+eventType.toUpperCase()));
        }
        eval(eh);
      }
      else eval(eh);
    }
    
    function xGetElementById(e) {
      if(document.getElementById) e=document.getElementById(e);
      else if(document.all) e=document.all[e];
      else e=null;
      return e;
    }
    Now, you can do something like this:
    Code:
    window.onload = function() {
      var eBottom = xGetElementById('bottom');
      xAddEventListener(eBottom, 'mouseover', mouseoverListener, false);
    }
    
    function mouseoverListener(e) {
      // ...
    }
    Now mouseover events on 'top' will bubble up to 'bottom' (in browsers that support bubbling).

  6. #6
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm .. looks kinda complicated, i will need some time to digest it

    I noticed that "eBottom" is static in the function.

    What I want is to have it dynamic, so that certain elements will react to the mouseover depending on their class name or something similar.


Bookmarks

Posting Permissions

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