mouseenter 与 mouseover 的区别

最新推荐文章于 2023-11-15 11:49:18 发布

他们叫我老蒋

最新推荐文章于 2023-11-15 11:49:18 发布

阅读量215

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/Jan_jiang/article/details/88909000

版权

javaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

mouseenter

当鼠标指针穿过元素时，会发生 mouseenter 事件。
该事件大多数时候会与 mouseleave 事件一起使用。
注意：只有鼠标指正穿过指定元素时（不包括子元素）才会触发该事件

mouseover

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mousemove() 方法触发 mousemove 事件，或规定当发生 mousemove 事件时运行的函数。

注意：用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

示例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(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;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>

参考：【http://www.w3school.com.cn/jquery/event_mousemove.asp】