问题描述

jQuery的mouseover和mouseenter的具体区别是什么？

如下一段HTML

<div style="width:300px; height:300px; background:green;">
    <p style="width:100px; height:100px; background:red"></p>
</div>
<strong></strong>

如下一段js

$(function(){
    $('div').mouseover(function(){
        $('strong').html(function(index, value){
            return value + 1;
        });
    });
});

鼠标从外面移入 div时，触发mouseover事件，使strong内容加1，然后移动到p时，居然也加了1；从外面移入p时，也加了1。这是为什么？
p不是在div内部吗，而且我绑定的元素是div，就算鼠标移入了p，怎么可能重新触发了div的mouseover事件？不是一直都在div里面吗？

解决方案

mouseenter移动进去触发一次，移动到子对象后，再移动到此对象不会触发，
mouseover移动到对象上就会触发，不管是否从子对象移动的

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<div id="dv">父div
<div>子div</div>
</div>
<div id='dvlog'></div>
<script>
$('#dv').mouseenter(function(){$('#dvlog').append('enter<br/>')}).mouseover(function(){$('#dvlog').append('over<br/>')})
</script>

解决方案二：

enter是鼠标进入指定区域时，而move肯定是进入之后，才会有移动事件

解决方案三：

JQuery--Mouseover和Mouseenter 的区别
JQuery mouseover、mouseenter区别
Mouseover与 Mouseenter的区别

解决方案四：

mouseover的处理对象是包括子对象的，而enter只是针对指定的对象