Hi, > I have a realy similar issue as this one, but more on the mouseout > event. Effectively, if I observe a mouseout on a ul, every time my > mouse goes from one li to the other, a mouseout event is triggered.
That's right, that's how mouseout is supposed to work, but it's a real pain. What you probably really want is mouseenter and mouseleave, rather than mouseover and mouseout. mouseenter and mouseleave are IE-only events (yes, IE does some things better than other browsers), but Prototype 1.6.1 (currently on Release Candidate 3[1]) emulates them on all supported browsers. If you can't use 1.6.1 yet (and there are outstanding issues), you might be able to study the code to see how it's done. Basically, it's a matter of checking (via event.relatedTarget) whether the mouse is going "out" from one descendant element to another (or from a descendant back to the main one) and ignoring that; similarly, if you're doing mouseovers, when handling them you need to check whether you're seeing a mouseover for the element you're already over (since mouseover happens repeated as the mouse moves over the element). [1] http://prototypejs.org/download HTH, -- T.J. Crowder tj / crowder software / com Independent Software Engineer, consulting services available On Jul 29, 11:04 pm, Christophe <[email protected]> wrote: > I have a realy similar issue as this one, but more on the mouseout > event. Effectively, if I observe a mouseout on a ul, every time my > mouse goes from one li to the other, a mouseout event is triggered. > > I tried to make a check in the target function to see which element > was doing the call, but I didn't always receive the ul... > > Is this how it's supposed to be done ? Has anyone an example somewhere > of a mouseout use (on an element with children elements) ? > > Kind regards, > Christophe > > On 17 juil, 09:37, David Behler <[email protected]> wrote: > > > > > Try this:http://www.prototypejs.org/api/event/findElement > > > $$(".superlist li").invoke("observe", "mouseover", function(event) { > > alert(|Event.findElement(event, 'li')|.inspect().escapeHTML() > > |); > > |}); > > > That should return the li element instead of a div. > > > David > > > > Hello everyone. > > > > I've basically got this HTML code: > > > > <ul class="superlist"> > > > <li class="foo" id="bar"> > > > <div class="foobar">some content</div> > > > <div class="content">some more content</div> > > > <div class="actions">some actions</div> > > > </li> > > > </ul> > > > > and this JS code: > > > > $$(".superlist li").invoke("observe", "mouseover", function(event) { > > > alert(event.element().inspect().escapeHTML()); > > > }); > > > > So now the thing is, that the event.element() method does NOT (as I > > > would expect) return the <li> element, but any of the nested elements > > > instead. Which might be a <div class="foobar"> or a <div > > > class="content">. > > > > That results in two problems for me: > > > 1. I want to toggle the visibility of li.actions for the li hovered. > > > It shall become visible on mouseover and unvisible onmouseout. That > > > doesn't work since anytime I move over one of the li's nested > > > elements, the mouse-events get triggered. Although (from my point of > > > view) I'm never leaving that element, since they are indeed children > > > of the li. > > > > 2. (similar to the first one) I do always need to know which li > > > element was hovered (so that I can determine which .actions div shall > > > be toggled but don't know any good way to achieve this. > > > > I've run through similar problems like this several times but could > > > never find a good solution. > > > Hope anyone here can help me out :-) --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
