在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());
});

从quirksmode(上面链接):

即使捕获事件或冒泡,target/srcElement也始终是事件发生的元素.

在这里演示.