dans jQuery comment donner la priorité d'être détecté par l'événement "mouseover" à l'élément enfant

Question

ma question est comment donner la priorité d'être détecté par l'événement "mouseover" à l'élément enfant plutôt qu'à son parent?

c'est le code jquery:

<script> 
$(function() { 
    $("li").mouseover(function(event){ 
     $('#log').html($(this).text()); 
    }); 
}); 
</script> 

et c'est le code html

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3 
     <ul> 
      <li>item 3.1</li> 
      <li>item 3.2</li> 
      <li>item 3.3</li> 
     </ul> 
    </li> 
    <li>item 4</li> 
    </ul> 

    <div id="log">log</div> 

comment sortie l'élément courant lorsque vous faites mouseover? Le problème est que lorsque vous passez la souris sur "item 3.1" jquery ne détectera pas "item 3.1" et que jquery supposera que vous passez la souris sur "item 3"?

Merci

Answer 1

Ajouter un span l'intérieur de chaque li autour du texte, et vérifier une souris sur ce

<script> 
$(function() { 
    $("li span").mouseover(function(event){ 
     $('#log').html($(this).text()); 
    }); 
}); 
</script> 

<ul> 
    <li><span>item 1</span></li> 
    <li><span>item 2</span></li> 
    <li><span>item 3</span> 
     <ul> 
      <li><span>item 3.1</span></li> 
      <li><span>item 3.2</span></li> 
      <li><span>item 3.3</span></li> 
     </ul> 
    </li> 
    <li><span>item 4</span></li> 
</ul> 

<div id="log">log</div> 

Answer 2

Vous voulez que le event target:

$("li").mouseover(function(event) { 
    $('#log').html($(event.target).text()); 
}); 

De quirksmode (lié ci-dessus):

Même si un événement est capturé ou si se forme, le target/srcElement reste toujours l'élément sur lequel l'événement a eu lieu.

Demo here.

Answer 3

Vous devez sélectionner des balises au lieu de tous les tags 'li' la 'li' intérieur.

Par exemple, vous pouvez ajouter un class='innerItem" à intérieur 'li', comme ceci:

<li class='innerItem'>item 3.1</li> 

Ensuite, votre jQuery devrait ressembler à ceci:

<script> 
    $(function() { 
     $("li.innerItem").mouseover(function(event){ 
     $('#log').html($(this).text()); 
    }); 
}); 
</script> 

Answer 4

Voici une alternative à la méthode Karim79 .

$("li").mouseover(function(event){ 
    $('#log').html($(this).text()); 
    event.stopPropagation(); 
}); 

Assurez-vous de lire ce que fait effectivement stopPropagation().

http://jsbin.com/afunu3