分享

mouseover事件与mouseenter事件的区别 .

 I_T_馆 2014-04-14
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave

这样的话,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./1999/xhtml">

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>  

<script type="text/javascript">  

x=0;  

y=0;  

$(function(){  

 $("div.over").mouseover(function(){  

    $(".over span").text(x+=1);  

  });  

  $("div.enter").mouseenter(function(){  

    $(".enter span").text(y+=1);  

  });  

});  

</script>  

</head>  

<body>  

<p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p>  

<p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p>  

<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">  

<h2 style="background-color:white;">

    <span>被触发的 Mouseover 事件:</span>

    </h2>  

</div>  

<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">  

<h2 style="background-color:white;"><span>被触发的 Mouseenter 事件:</span></h2>  

</div>  

</body>  

</html>


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多