javascript - trick to simulate mouseenter and mouseleave
Previously we discussed javascript - trick to handlers management for add/remove custom events. and
javascript - trick to detect bubbling supportability to test if a certain event is supported in certain (actually the current) browser.
mouseenter and mouseleave ae are two custom events that is introduced by IE, while it has superiority in determing if the mouse is and only is within the target element.
the counterparts, mouseover and mouseout has limitation in that it will falsifly fire if the mouse is within child elemnts of the target element.
below is the code that simulate the mouseenter and mouseleave event with the help of previous discussed addremoveevents and event supportability detects.
/**************************************
*@Name: mouses.js
* Mouse enter and MouseLeave event are more easier to use to determine when the mouse is currently positioned within an elment, or outside it.
*@Summary
* there are conterparts in almost every browser, which is called mouseover and mouseout; the problem with them is that
* @NOTE:
* this has dependencies on other js files
* 1. isEventSupported.js
* 2. addremoveevents.js
* @todo:
* Test and add them to the docs
***************************************/
(function () {
if (isEventSupported("mouseenter")) {
this.hover = function(elem, fn) {
addEvent(elem, "mouseenter", function() {
fn.call(elem, "mouseenter");
});
addEvent(elem, "mouseleave", function() {
fn.call(elem, "mouseleave");
});
};
} else {
this.hover = function(elem, fn) {
addEvent(elem, "mouseover", function(e) {
withinElement(this, e, "mouseenter", fn);
});
addEvent( elem, "mouseout", function(e){
withinElement( this, e, "mouseleave", fn );
});
};
}
function withinElement(elem, event, type, handle) {
// Check if mouse(over|out) are still
// within the same parent element
var parent = event.relatedTarget; // this is non-ie, but the event withinEvent is mean to work on non-ie only
// Traverse up the tree
while (parent && parent != elem) {
// Firefox sometimes assigns relatedTarget a XUL element
// which we cannot access the parentNode property of
try {
parent = parent.parentNode;
} catch (e) { break; }
}
if (parent != elem) {
// handle event if we actually just
// mouse oon to a non sub-element
handle.call(elem, type);
}
}
})();
below is the code that hows you how to use it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- mouses.html to test mouses.js -->
<script type="text/javascript" src="addremoveevents.js"></script>
<script type="text/javascript" src="isEventSupported.js"></script>
<script type="text/javascript" src="mouses.js"></script>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementsByTagName('div')[0];
// the hover event is defined in .js mouses.js file
hover(div, function (type) {
if (type === "mouseenter") {
this.className = "over";
} else {
this.className = "";
}
});
};
</script>
</head>
<body>
<div>Hover <strong>over</strong> me!</div>
<style>.over { background: yellow; }</style>
</body>
</html>