[Javascript] Event question and finding pointer position at event

[Bill Moseley]

[This was redirected from "thelist" at evolt.org -- sorry for those
on both lists]


I have two questions.  One is why events are firing when moving a
mouse *within* a <div> when the events are on mouseover and mouseout on
just the div, and the second question is how to get the correct
pointer position when the event happens.


I'm playing with javascript popup menus -- I'm trying to learn a
little, I'm not trying to find some code to copy that works.


I have a <div> popup menu that I change from display: none to display:
block using onmouseover and onmouseout.

And also on the <div> I also have mouseover and mouseout events.

(I've only tested in Firefox, so may not work in other clients)

Here's the javascript:

    http://hank.org/demos/js/menu_popup.js


First question is about events:

    http://hank.org/demos/menu3.html

(Hover over the "Second menu..." link.)


Again, I set mouseover and mouseout on the popup <div>, yet when the
menu is displaying as I move my mouse around *on* the menu I see
mouseout events begin called ("menuout" in the debug panel on the
right).  I expected only to see the event when moving outside the
<div>, but perhaps I'm not understanding how (or when) events are
suppose to be triggered.  Is that the expected behavior?


Second quesiton:

I'm using Prototype to fetch the mouse position, which uses the
method that is often recommended if you google around:

  pointerX: function(event) {
    return event.pageX || (event.clientX +
      (document.documentElement.scrollLeft || document.body.scrollLeft));
  },

  pointerY: function(event) {
    return event.pageY || (event.clientY +
      (document.documentElement.scrollTop || document.body.scrollTop));
  },

The problem is when I use a floating centered layout that method to
determine the mouse location is off by how much the page is indented:

Make your screen wide and notice how the popup is moved over to the
right the amount the page content is moved over to the right.

    http://hank.org/demos/menu4.html

The results in the menu not popping up next to the mouse pointer.

Anyone know what I'd need to add in to get the position correct?



BTW, yes, I'd rather do CSS-only menus -- these two are css only menus:

    http://hank.org/demos/menu.html
    http://hank.org/demos/menu2.html

But I'm having a harder time getting IE to work with those.


-- 
Bill Moseley
moseley at hank.org