Come disabilitare gli eventi del mouseout attivati ​​da elementi figlio?

Lasciatemi descrivere il problema in dettaglio:

Voglio mostrare un div posizionato assoluto quando si passa con il mouse su un elemento. È davvero semplice con jQuery e funziona perfettamente. Ma quando il mouse passa su uno degli elementi figlio, attiva l'evento mouseout del div contenitore. Come faccio a impedire a JavaScript di attivare l'evento mouseout dell'elemento contenitore quando si passa con il mouse su un elemento figlio.

Qual è il modo migliore e più breve per farlo con jQuery?

Ecco un esempio semplificato per illustrare cosa intendo:

html:

<a>Hover Me</a>
<div>
  <input>Test</input>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

JavaScript / jQuery:

$('a').hover( function() { $(this).next().show() }
              function() { $(this).next().hide() } );

La domanda è un po 'vecchia, ma mi sono imbattuto in questo l'altro giorno.

Il modo più semplice per farlo con le versioni recenti di jQuery è usare gli eventi mouseentere mouseleaveinvece di mouseovere mouseout.

Puoi testare rapidamente il comportamento con:

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});

Per semplicità, riorganizzerei un po 'l'html per inserire il contenuto appena visualizzato all'interno dell'elemento a cui è associato l'evento mouseover:

<div id="hoverable">
  <a>Hover Me</a>
  <div style="display:none;">
    <input>Test</input>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>

Quindi, potresti fare qualcosa del genere:

$('#hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

Nota: non consiglio il CSS inline, ma è stato fatto per rendere l'esempio più facile da digerire.

Sì, ragazzi, usate .mouseleaveinvece di .mouseout:

$('div.sort-selector').mouseleave(function() {
    $(this).hide();
});

O anche usarlo in combinazione con live:

$('div.sort-selector').live('mouseleave', function() {
    $(this).hide();
});

Stai cercando l'equivalente jQuery del bubbling di eventi di javascript.

Controllalo:

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

Fondamentalmente è necessario catturare l'evento nei nodi DOM figli e interrompere la loro propagazione sull'albero DOM. Un altro modo, sebbene in realtà non suggerito (in quanto può seriamente compromettere gli eventi esistenti sulla tua pagina), è impostare l'acquisizione degli eventi su un elemento specifico nella pagina e riceverà tutti gli eventi. Questo è utile per il comportamento DnD e simili, ma sicuramente non per il tuo caso.

Sto semplicemente controllando se le coordinate del mouse sono esterne all'elemento nell'evento mouseout.

Funziona ma è un sacco di codice per una cosa così semplice :(

function mouseOut(e)
{
    var pos = GetMousePositionInElement(e, element);
    if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y)
    {
        RealMouseOut();
    }
    else
    {
         //Hit a child-element
    }
}

Il codice ridotto per la leggibilità, non funzionerà immediatamente.

Sono d'accordo con Ryan.

Il tuo problema è che il div "successivo" non è un "figlio" di A. Non c'è modo per HTML o jQuery di sapere che il tuo elemento "a" è correlato al div figlio nel DOM. Avvolgerli e mettere un passaggio del mouse sull'involucro significa che sono associati.

Tieni presente che il suo codice non è in linea con le migliori pratiche, però. Non impostare lo stile nascosto in linea sugli elementi; se l'utente ha CSS ma non javascript, l'elemento verrà nascosto e non potrà essere mostrato. La pratica migliore è inserire quella dichiarazione nell'evento document.ready.

Ho risolto questo problema aggiungendo i pointer-events: none;miei elementi figlio css

Il modo in cui di solito ho visto questo gestito è di avere un ritardo di circa 1/2 secondo tra lo spostamento del mouse dall'elemento HoverMe. Quando si sposta il mouse nell'elemento al passaggio del mouse, si desidera impostare una variabile che segnali che si sta passando il mouse sull'elemento e quindi sostanzialmente interrompere la parte al passaggio del mouse dal nascondersi se questa variabile è impostata. È quindi necessario aggiungere una funzione Nascondi simile su OnMouseOut dall'elemento al passaggio del mouse per farlo scomparire quando si rimuove il mouse. Mi dispiace di non poterti dare alcun codice o qualcosa di più concreto, ma spero che questo ti indichi nella giusta direzione.

È una vecchia domanda, ma non diventa mai obsoleta. La risposta corretta dovrebbe essere quella data dalla bytebrite .

Vorrei solo sottolineare la differenza tra mouseover / mouseout e mouseenter / mouseleave. Puoi leggere una spiegazione utile e utile qui (vai in fondo alla pagina per una demo funzionante). Quando lo usi mouseout, l'evento si interrompe quando il mouse entra in un altro elemento, anche se è un elemento figlio. D'altra parte, quando si utilizza mouseleave, l'evento non viene attivato quando il mouse passa sopra un elemento figlio, e questo è il comportamento che l'OP vorrebbe ottenere.