Detecting when mouse goes out of a div (I mean really out)

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Detecting when mouse goes out of a div (I mean really out)

Sebastian Sastre-2
Hi guys,
 
    I imagine that you also found awsome the DOM "feature" that client agents decided to implement in which you receiver #mouseout events even when the mouse goes more deep *inside* that div (sub elements).
 
    I was able to implement some js wrappers to manage that but I'm not *that* satisfied with the results (mainly because js VMs being so slow todays and having such *pieces* of garbage collectors among other wonders).
 
    So I wnated to ask how other seasiders have managed to detect the case in which the pointer in fact goes out an element's surface. One typical application for this is making a menu to collapse when pointer get out it's surface (and no submenu open). Did you managed a case like this?
 
    cheers,
 

Sebastian Sastre

 


_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Detecting when mouse goes out of a div (I mean really out)

Lukas Renggli
I have been using onMouseOver and onMouseOut in several projects and
these events mostly worked for me as expected. I would rather prefer
to call these events onMouseEnter and onMouseExit, but anyway.

>     I imagine that you also found awsome the DOM "feature" that client
> agents decided to implement in which you receiver #mouseout events
> even when the mouse goes more deep *inside* that div (sub elements).

This is because your sub-elements also trigger the event and the it
bubbles upwards in the DOM tree (unless you cancel it). To avoid that
you have to manually check in the event object if this is the right
element to handle. For details see:

http://www.quirksmode.org/js/events_mouse.html#mouseover

>     I was able to implement some js wrappers to manage that but I'm not
> *that* satisfied with the results (mainly because js VMs being so slow
> todays and having such *pieces* of garbage collectors among other wonders).

What do you exactly do that it is so slow? Event handlers should be
reasonably short to avoid the whole system getting slow.

>     So I wnated to ask how other seasiders have managed to detect the case
> in which the pointer in fact goes out an element's surface. One typical
> application for this is making a menu to collapse when pointer get out it's
> surface (and no submenu open). Did you managed a case like this?

You can do that also with pure CSS. For example:

http://www.alistapart.com/articles/horizdropdowns
http://www.tanfa.co.uk/css/examples/menu
http://www.cssplay.co.uk/menus/final_drop.html

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: Detecting when mouse goes out of a div (I mean reallyout)

Sebastian Sastre-2
> -----Mensaje original-----
> De: [hidden email]
> [mailto:[hidden email]] En nombre
> de Lukas Renggli
> Enviado el: Sábado, 04 de Agosto de 2007 04:16
> Para: Seaside - general discussion
> Asunto: Re: [Seaside] Detecting when mouse goes out of a div
> (I mean reallyout)
>
> I have been using onMouseOver and onMouseOut in several
> projects and these events mostly worked for me as expected. I
> would rather prefer to call these events onMouseEnter and
> onMouseExit, but anyway.
>
I should worked probably because they aren't composed components (I mean:
dom elements without children).
MouseEnter ans MouseLeave is the first good idea I've seen that comes from
IE but Prototype is not yet supporting it cross browser (but I think they
plan to) so I works *only* in IE with plans to work cross browser (thanks to
prototype, again).

> >     I imagine that you also found awsome the DOM "feature"
> that client
> > agents decided to implement in which you receiver #mouseout events
> > even when the mouse goes more deep *inside* that div (sub elements).
>
> This is because your sub-elements also trigger the event and
> the it bubbles upwards in the DOM tree (unless you cancel
> it). To avoid that you have to manually check in the event
> object if this is the right element to handle. For details see:
>
> http://www.quirksmode.org/js/events_mouse.html#mouseover
>
Which is your suggestion to make that manual check? I ask because I've
managed to make something like that (does that and more) but not quite
satisfying.

> >     I was able to implement some js wrappers to manage that but I'm
> > not
> > *that* satisfied with the results (mainly because js VMs
> being so slow
> > todays and having such *pieces* of garbage collectors among
> other wonders).
>
> What do you exactly do that it is so slow? Event handlers
> should be reasonably short to avoid the whole system getting slow.
>
Yeah, event handler should do. But as you said, anything which is not short
enough in JS makes things go strange. What I've done is a little framework
that wrapps all dom elements that corresponds to seaside compoents. That way
I have a js object per seaside component. In the load of the page I make it
to initialize loading in the js wrappers the dom element, wiring events
(that I've programmed in seaside to be wired). I even can make them to
adquire behavior dynamically depending on the seaside component class they
represent. I've started using js like if I was using ST (proper colaboration
reaction to events between them, etc). I even make a pointerOut and
pointerOver methods that make what I'm asking for by filtering the unwanted
mouseOut mouse Over dom events. Also they can have wired and triggered their
own events (with arbitrary arguments). To make that I've inplemented in the
js objets a performWithArguments() (LOL), and a silly version of DNU (LOL).
All that in a st image would be like a walk in the park but in the browsers
js vm's represents delays  initializing objects, N megas of ram, memory
leaks due to poor GC and anything but safari don’t run that good.
Perhaps in Firefox 4 with the adobe's JS VM with jiter that they have
donated to mozilla I will return to this strategy, but todays I see is too
much for js.

> >     So I wnated to ask how other seasiders have managed to
> detect the
> > case in which the pointer in fact goes out an element's
> surface. One
> > typical application for this is making a menu to collapse
> when pointer
> > get out it's surface (and no submenu open). Did you managed
> a case like this?
>
> You can do that also with pure CSS. For example:
>
> http://www.alistapart.com/articles/horizdropdowns
> http://www.tanfa.co.uk/css/examples/menu
> http://www.cssplay.co.uk/menus/final_drop.html
>
> Lukas
>
> --
I wanted a more general and powerful approach for menues but I'm afraid that
I should reconsider that by now.

cheers,

Sebastian

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside