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将不会检测到“item 3.1”，而jquery会假设你将鼠标移到“第3项”？

由于

Answer 1

你想要event target：

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

来自quirksmode（上面链接）：

即使捕获事件或冒泡，目标/ srcElement 始终是事件的元素发生在。

Demo here.

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

您应该选择内部'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>

Answer 4

这是Karim79方法的替代方案。

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

请务必阅读stopPropagation()实际执行的操作。

http://jsbin.com/afunu3

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

4 个答案: