в jQuery, как дать приоритет обнаружения события "mouseover" для дочернего элемента

Question

Мой вопрос заключается в том, как дать приоритет обнаружения события «mouseover» дочернему элементу, а не его родительскому элементу?

это код jquery:

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

и это 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>

каквыводить текущий элемент при наведении мыши?

проблема в том, что при наведении курсора мыши на "элемент 3.1" jquery не обнаружит "элемент 3.1", а вместо этого jquery будет предполагать, что вы навели курсор мыши на "элемент 3"?

Answer 1

Требуется цель события :

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

Из причудливого режима (ссылка выше):

Даже если событие захвачено или пузырьки вверх, цель / srcElement всегда остается элементом события произошло на.

Демо здесь.

Answer 2

Добавьте span внутри каждого li вокруг текста и проверьте, наведен ли указатель мыши на этот

<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 3

Вот альтернатива методу Karim79.

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

Обязательно прочитайте, что на самом деле делает stopPropagation () .

http://jsbin.com/afunu3

Answer 4

Вы должны выбрать внутренние теги 'li' вместо всех тегов 'li'.

Например, вы можете добавить class='innerItem" к внутреннему 'li', например:

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

Тогда ваш jQuery должен выглядеть так:

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