在jQuery中，如何将被“ mouseover”事件检测到的优先级赋予子元素

问题描述

| 我的问题是如何将被“ 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>

鼠标悬停时如何输出当前元素？ 问题是当您将鼠标悬停在\“ item 3.1 \”上时，jQuery不会检测到\“项目3.1 \”，而是jquery将假定您将鼠标悬停在\“ item 3 \”吗？ 谢谢     

解决方法

您想要事件目标：

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

从quirksmode（上面链接）：   即使捕获到事件或   起泡，目标/ srcElement   始终是事件的要素   发生了。 演示在这里。     ,在文本周围的每个

li

内添加一个

span

，并检查是否有鼠标悬停在该文本上

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

    ,这是Karim79方法的替代方法。

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

确保阅读stopPropagation（）的实际作用。 http://jsbin.com/afunu3     ,您应该选择内部\'li \'标记而不是所有\'li \'标记。 例如，您可以在内部\'li \'中添加一个

class=\'innerItem\"

，如下所示：

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

然后您的jQuery应该看起来像这样：

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