1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>simuler mouseenter et mouseleave</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {margin:0;padding:0;color:#ddd;}
body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
.conteneur {width:200px;height:200px;background:#333;}
.titre {display:none;background:#666;}
</style>
</head>
<body>
<div id="d1" class="conteneur">
<h1 class="titre">titre 1</h1>
</div>
<div class="conteneur">
<h1 class="titre">titre 2</h1>
</div>
<script type="text/javascript">
var FC = {
DOM: {
getElementsByClassName: function(classe, noeud, balise) {
var elements = [];
noeud = noeud || document;
if (document.getElementsByClassName) { elements = noeud.getElementsByClassName(classe); }
else {
balise = balise || "*";
var elementsCourants = noeud.getElementsByTagName(balise);
var pattern = new RegExp("(^|\\s)" + classe + "(\\s|$)");
for (var i=0,imax=elementsCourants.length; i<imax; i++) {
if (pattern.test(elementsCourants[i].className)) { elements.push(elementsCourants[i]); }
}
}
return elements;
}
},
Evenement: {
evenements: [],
ajouter: function(elm, evt, fn) {
var fni = function(e) { // prévient le comportement par défaut
if (fn(e)===false) { // false explicitement car peut être undefined en cas de délégation d'évènement
if (e.preventDefault) { e.preventDefault(); }
else { e.returnValue = false; }
}
};
if (document.addEventListener) { elm.addEventListener(evt, fni, false); }
else if (document.attachEvent) { elm.attachEvent("on" + evt, fni); }
FC.Evenement.evenements.push([elm, evt, fni]);
},
supprimer: function(elm, evt, fn) {
var evts = FC.Evenement.evenements;
for (var i=evts.length-1; i>=0; i--) {
if (evts[i][0]===elm && evts[i][1]===evt) {
if (document.removeEventListener) { elm.removeEventListener(evts[i][1], evts[i][2], false); }
else if (document.detachEvent) { elm.detachEvent("on" + evts[i][1], evts[i][2]); }
FC.Evenement.evenements.splice(i,1);
}
}
}
}
};
FC.Evenement.ajouter(document, "mouseover", function(e) {
var elm = e.target || event.srcElement;
var fn = function(n) { alert(n); }
if (elm.className.indexOf("conteneur")>-1) {
var elms = FC.DOM.getElementsByClassName("titre", elm, "h1");
for (var i=0, imax=elms.length;i<imax;i++) {
elms[i].style.display="block";
}
}
});
FC.Evenement.ajouter(document, "mouseout", function(e) {
var elm = e.target || event.srcElement;
var elmDestination = e.relatedTarget || event.toElement;
if (elm.className.indexOf("conteneur")===-1 && elmDestination.className.indexOf("titre")===-1) {
var elms = FC.DOM.getElementsByClassName("titre", document, "h1");
for (var i=0, imax=elms.length;i<imax;i++) {
elms[i].style.display="none";
}
}
});
</script>
</body>
</html> |
Partager