chrome vs firefox: on mouse leave/enter event

1,516 views
Skip to first unread message

Gustaf Nilsson

unread,
Feb 13, 2012, 11:18:00 PM2/13/12
to Google Web Toolkit
Hi

I am a member of the Pyjamas community (a python port of GWT). Today I
ran into a problem caused by how firefox and chrome triggers these
events, and I would like to see if anyone could confirm if this
problem exists on GWT, or if it is a problem in the python port.

The problem can be described like this:

say i have a panel A with a second smaller panel B inside.
Both have mousehandlers.

Say my mouse pointer is already inside A, but not B and then I move
the pointer into B and then back out.

In firefox:
*when i move cursor into B: B triggers onMouseEnter twice.
*when i move cursor off B: B triggers onMouseLeave once, A triggers
onMouseEnter twice

chrome:
*when i move cursor into B: B triggers onMouseEnter once.
*when i move cursor off B: B triggers onMouseLeave once.


Please it would be great if someone could try this in GWT and let us
know the results.

Thanks
Gustaf

Thomas Broyer

unread,
Feb 14, 2012, 4:58:38 AM2/14/12
to google-we...@googlegroups.com
I don't have time to try it out with GWT, sorry, but just to add some input to the possible issue: mouseover and mouseout events bubble, so if your mouse enters a child element of the B widget's root element, the event will bubble up to B's root element. GWT filters those events out in Widget#onBrowserEvent's default implementation to somehow mimic IE's (and now HTML5's / DOM3 Events') mouseenter and mouseleave events: http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/client/ui/Widget.java#163

Gustaf Nilsson

unread,
Feb 14, 2012, 11:39:40 AM2/14/12
to Google Web Toolkit
Thanks

If it makes a difference, in my onMouseXXX methods, i run some code to
stop the event propagation, it looks like:

def onMouseEnter(self, sender):
event = DOM.eventGetCurrentEvent()
DOM.eventStopPropagation(event)
#do stuff after here

Sorry for the python code, but its all I know ;)

Gustaf
> now HTML5's / DOM3 Events') mouseenter and mouseleave events:http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/...

lkcl

unread,
Feb 14, 2012, 3:18:04 PM2/14/12
to Google Web Toolkit


On Feb 14, 9:58 am, Thomas Broyer <t.bro...@gmail.com> wrote:
> now HTML5's / DOM3 Events') mouseenter and mouseleave events:http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/...

thomas, hi, thanks for pointing this out. what we had was using
DOM.eventGetFromElement for mouseover, whereas the code in GWT uses
eventGetToElement.

i've modified the equivalent pyjamas code to this:

elif etype == "mouseover":
to_element = DOM.eventGetToElement(event)
if to_element and not DOM.isOrHasChild(sender.getElement(),
to_element):
for listener in listeners:
listener.onMouseEnter(sender)
return True
elif etype == "mouseout":
to_element = DOM.eventGetToElement(event)
if to_element and not DOM.isOrHasChild(sender.getElement(),
to_element):
for listener in listeners:
listener.onMouseLeave(sender)
return True
return False

where it is this in java:

public void onBrowserEvent(Event event) {
switch (DOM.eventGetType(event)) {
case Event.ONMOUSEOVER:
// Only fire the mouse over event if it's coming from outside
this
// widget.
case Event.ONMOUSEOUT:
// Only fire the mouse out event if it's leaving this
// widget.
Element related = event.getRelatedEventTarget().cast();
if (related != null && getElement().isOrHasChild(related)) {
return;
}
break;
}
DomEvent.fireNativeEvent(event, this, this.getElement());
}

Reply all
Reply to author
Forward
0 new messages