Événement de survol déclenché par Child Elements - comment l'arrêter?

Question

J'ai cette interface que je veux construire en utilisant Effect.Move de scriptaculous (avec Prototype, bien sûr).

Lorsque le top div est déclenché au passage de la souris, une balise span doit se déplacer de 50 pixels vers la gauche - et être réinitialisée sans mouvement vers son emplacement d'origine lors du passage au point mort. Le problème est que, à chaque fois que cet élément div est entré à partir d'un élément enfant, l'élément que je veux déplacer déplace 50 pixels de plus. J'ai essayé d'utiliser relatedTarget et toElement pour empêcher cet événement de se propager, mais en vain. Voici le code, pour l'instant incomplet:

e.observe('mouseover', function(evt) { 
    var block = e.down('span'); 

    if(evt.target == block && !evt.relatedTarget.descendantOf(block)){ 
    new Effect.Move(block, { x: -50, duration: 0.4, 

    }); 
    } else { 

    } 

    }); 

HTML Exemple:

<div class='trigger'> 
    <span class='to-be-moved'>...</span> 
    <p>Child Element</p> 
    <h2>Another Child Element</h2> 
    <a>Link</a> 
</div> 

Je suis totalement perdu ici - des suggestions?

Answer 1

Avez-vous essayé d'utiliser "mouseenter" and "mouseleave" au lieu de "mouseover" et "mouseout"? Ils ne se déclenchent qu'une seule fois même avec des éléments enfants, et le prototype supports it since 1.6.1.

Answer 2

Essayez cette fonction

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; 
} 

Utilisation est:

hover($('el_id'), function(elem, evt){ 
    /* Mouse over code here */ 
}, 
function(elem, evt){ 
    /* Mouse out code is here */ 
}); 

Il est très simple.

Answer 3

Regardez here.

Si vous recherchez un élément spécifique ayant déclenché l'événement onmouseover, utilisez la méthode Event.findElement(...) de Prototype pour passer au crible les enfants indésirables.

La réponse de Serkan est une manière hoky d'accomplir la tâche mais ne fonctionnera pas dans tous les navigateurs.