11548 sujets

JavaScript, DOM et API Web HTML5

Fonction remplacant OnMouseLeave

Bonjour !
Voila je vous explique mon problème :
OnMouseout ne fonctionne pas correctement sur Firefox :
Imaginons un div avec des liens :
<div OnMouseout="Ma_Fonction();">
<a href="1.html"> Mon 1er liens </a>
<a href="1.html"> Mon 2em liens </a>
</div>

Lorsque nous allons sur les liens, le navigateur pense qu'on quitte le div et dont la fonction :Ma_Fonction se déclenche.

Sur IE la méthode OnMouseLeave fonctionne sans problème mais UNIQUEENT sur IE Smiley decu .

En gros je cherche a créer une fonction avec OnMouseout qui vérifie si on est toujours dans le div.
Si oui alors on exécute pas Ma_Fonction();
Si non on exécute Ma_Fonction();

Peut être en regardant si la souris est sur un node ou le parents est div ?

J'ai cherché un peu sur internet et j'ai trouver que on pouvez utilisé un SetTimeOut, j'ai essayé mais aucun résultat.
Merci beaucoup de m'aider. Smiley help
Hello,

Un peu de lecture pour commencer (le respect des standards du web, respect des bonnes pratiques, produire un code JavaScript non intrusif, évolutif, accessible, facilitant la maintenance et minimisant les risques d'interaction, toussa... ©Raphael G. Smiley cligne )

Ensuite, quel est le but recherché, que doit faire ta fonction ?

A te lire Smiley smile
La fonction que je cherche doit faire la même chose que OnMouseLeave, c'est à dire lorsque le curseur quitte le div la fonction ce lance.
Hors OnMouseout lance la fonction quand le curseur quitte le div ou passe sur un élément (les liens) du div.
Mon but est de faire un menue déroulant avec des liens et donc lorsque le curseur quitte le div la fonction qui rétrécit le menue se lance.

Merci de votre aide.
Effectivement, la fonction onmouseleave est souvent bien utile, d'ailleur elle est implémenté dans la plupart des frameworks javascript, jquery, mootools, prototype. C'est un peu comme pour innerHTML, ou certaine fonction range(), il y a quand même quelques fonctions propriétaires ie qui sont très bien et ça serait pas que le w3c les valident.

J'ai essayé de l'émuler avec cette fonction addEvent, tu peux toujours essayer :

var eventListeners = [];

function addEvent(node, type, handler, par){

  if (!handler.$$guid) handler.$$guid = eventListeners.length+1;

  var handlerEvent = function(event){
    if (!event) var event = window.event;   
    return handler.call(node, event, par);
  };
  if(node.addEventListener){
    if(type == 'mouseenter' || type == 'mouseleave'){     
      handlerEvent = function(e){  
        if(this == e.relatedTarget)return;
        else{
          var t = this.getElementsByTagName('*');var l = t.length;     
          for(var I = 0;I < l; I++){
            if(e.relatedTarget == t[I])return;
          }
        }
        handler.call(this, e, par);
      };
      if(type == 'mouseenter')type='mouseover';
      if(type == 'mouseleave')type='mouseout';
    }
		node.addEventListener(type, handlerEvent, false);
  }else{
    node.attachEvent('on' + type, handlerEvent);
  }
  eventListeners.push({node: node, event: type, id: handler.$$guid, handler: handlerEvent});
}

function removeEventIndex(index){
  var ev = eventListeners[index];
  delete eventListeners[index];
  if(ev.node.removeEventListener) ev.node.removeEventListener(ev.event,ev.handler, false);  
  else ev.node.detachEvent('on' + ev.event,ev.handler);
}

function removeEvent(node, event, handler){
  for(I in eventListeners){
    if (eventListeners[I].id == handler.$$guid) removeEventIndex(I);
  }
  return null;
}

function cleanupEventListeners(){
  for (var I = eventListeners.length; I > 0; I--){
    if (eventListeners[I] != undefined) removeEventIndex(I);
  }
}

addEvent(window, 'unload', cleanupEventListeners);

function stopEvent(event){
  if(event.stopPropagation)event.stopPropagation();
  else event.cancelBubble = true;
  if(event.preventDefault)event.preventDefault();
  else event.returnValue = false;
};


Tu fais comme ça :
addEvent(element,'mouseleave',doSomething);

Modifié par matmat (30 Jun 2009 - 18:28)
Merci pour ton aide.


Où dois-je mettre cette ligne ?
addEvent(element,'mouseleave',doSomething);

<div OnMouseout="addEvent(element,'mouseleave',Ma_Fonction(););">

?
Modifié par ultimate (05 Jul 2009 - 16:53)
Sujet clos
Aller à