Mouseover Event Triggered By Child Elements - How To Stop This?
I have this interface I want to build using Effect.Move from scriptaculous (with Prototype, of course). When the top div is triggered on a mouseover, a span tag is to move 50 pixel
Solution 1:
Did you try to use "mouseenter" and "mouseleave" instead of "mouseover" and "mouseout"? They will only trigger once even with child elements, and Prototype supports it since 1.6.1.
Solution 2:
Try this function
function hover(elem, over, out){
$(elem).observe("mouseover", function(evt){
if(typeof over == "function"){
if(elem.innerHTML){
if(elem.descendants().include(evt.relatedTarget)){ return true; }
}
over(elem, evt);
}else if(typeof over == "string"){
$(elem).addClassName(over);
}
});
$(elem).observe("mouseout", function(evt){
if (typeof out == "function") {
if(elem.innerHTML){
if(elem.descendants().include(evt.relatedTarget)){ return true; }
}
out(elem, evt);
}else if(typeof over == "string"){
$(elem).removeClassName(over);
}
});
return elem;
}
Usage is:
hover($('el_id'), function(elem, evt){
/* Mouse over code here */
},
function(elem, evt){
/* Mouse out code is here */
});
It's very simple.
Solution 3:
Look here.
If you're looking for a specific element that triggered the onmouseover
event, use Prototype's Event.findElement(...)
method in order to sift through unwanted children.
Serkan's answer is a hoky way of completing the task but won't work in all browsers.
Post a Comment for "Mouseover Event Triggered By Child Elements - How To Stop This?"