Jerod Venema wrote:
> Anyone have any thoughts on adding a function like that to the
> "simulated" area of prototype as mouseenter/mouseleave events (such as
> the ones IE has natively)? It'd be handy to have a cross-browser
> implementation of those events. I'm not sure what it would take to
> simulate events as opposed to properties or functions, but that would
> definitely be neat...
Let me preface my comments by offering a working example of a
cross-browser mouseenter/mouseleave implementation using the
aforementioned approach of event.relatedTarget by Peter-Paul Koch. see
http://kendsnyder.com/sandbox/mouseenter.html
This is a very interesting topic. It is truly counter-intuitive that
mouseout events are fired when moving from the parent to the child
element and likewise that mouseover events are fired when moving from
the child to the parent. I think many developers avoid this situation
in various ways.
See the code to my working example below. Note that it passes the
element back to the observer function because IE doesn't support
event.currentTarget.
I think it is reasonable to request that onmouseenter and onmouseleave
be implemented for non-IE browsers in Prototype. This pair of DOM
events is quite useful. The trick, at least from what I can see, is
that a mouseover/mouseout observer must be wrapped in a function. Once
the wrapping occurs, a cache is needed to provide the ability to detach
a mouseenter/mouseleave observer. My example lacks detachment
functionality.
I'll look into creating a patch that integrates with Prototype.
--Ken Snyder
Element.addMethods({
onmouseenter: function(element,observer) {
element = $(element);
element.observe('mouseover',function(evt,currentTarget) {
var relatedTarget = $(evt.relatedTarget || evt.fromElement);
if( relatedTarget!=currentTarget &&
relatedTarget.childOf(currentTarget)==false ) {
observer();
}
}.bindAsEventListener({},element));
return element;
},
onmouseleave: function(element,observer) {
element = $(element);
element.observe('mouseout',function(evt,currentTarget) {
var relatedTarget = $(evt.relatedTarget || evt.toElement);
if( relatedTarget!=currentTarget &&
relatedTarget.childOf(currentTarget)==false ) {
observer();
}
}.bindAsEventListener({},element));
return element;
}
});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" 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/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
