mouseover/out和mouseenter/leave的区别及用法

最新推荐文章于 2022-08-24 06:10:48 发布
最新推荐文章于 2022-08-24 06:10:48 发布
阅读量276 收藏
点赞数
文章标签： xhtml javascript ViewUI


今天在做下拉菜单练习时发现一些奇怪的问题，就是当用mouseover和mouseout时，当鼠标移动到下拉菜单时容易出现闪动，最后经过查资料发现

mouseover：无论鼠标指针穿过被选元素还是任何的子元素，都会触发mouseover事件，而mouseenter只有在鼠标指针穿过被选元素时，才会触发mouseenter事件；

mouseout ： 无论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件，而mouseleave只有在鼠标指针离开被选元素的时候，才触发mouseleave事件；



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动下拉菜单</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".topnav").mouseenter(function(){

$(this).find("ul").slideDown("slow");
}).mouseleave(function(){
$(this).find("ul").slideUp("slow");
})
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-size:12px;}
.menu{ width:980px; margin:50px auto;}
.menu .topnav{ float:left; border-right:1px solid #fff; background:#FFE60C; width:140px;}
.menu .topnav ul{ display:none;}
.menu .topnav ul li{ border-bottom:1px solid #fff;}
.menu ul{ list-style:none; }
.menu li a{ color:#000; line-height:32px; padding:0 20px; width:100px; display:block; text-decoration:none;}
.menu li a:hover{color:#fff; text-decoration:none; background:#062723 url(images/slide-panel_03.png) 0 0 repeat-x;}

</style>
</head>

<body>
<div class="menu">
<ul class="level">
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="topnav"><a href="">do touch me</a>
<ul id="sub_01">
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

当用mouseover和mouseout时，js代码如下



<script type="text/javascript">
$(document).ready(function(){
$(".topnav").mouseover(function(){

$(this).find("ul").slideDown("slow");
}).mouseout(function(){
$(this).find("ul").slideUp("slow");
})
})
</script>




iteye_3606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中mouseover事件用法实例
10-25
主要介绍了jQuery中mouseover事件用法,以实例形式分析了mouseover事件处理鼠标指针滑过时的使用技巧,需要的朋友可以参考下
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
09-03
`mouseover`, `mouseout`, `mouseenter`, 和 `mouseleave` 是四个常见的鼠标事件，它们都与鼠标的移动有关，但触发条件有所不同。理解这些事件的区别对于编写无闪烁、响应良好的用户界面至关重要。 1. `mouseover` ...
MOUSE_OVER/MOUSE_OUT与ROLL_OVER/ROLL_OUT的区别
weixin_30685047的博客
08-14 88
MOUSE_OVER和MOUSE_OUT除了对监听该事件的控件作出响应，同时也对该控件的所有子控件(拥有该事件)进行响应 ROLL_OVER和ROLL_OUT则相反，只响应监听该事件的控件 Code package{importflash.display.Sprite;importflash.display.StageScaleMode;importflas...
mouseover和mouseout区别
a848057236的博客
12-23 356
http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover不论鼠标指针穿过被选元素或其子元素，或出子元素，都会触发 mouseover 事件。
mouseover与mouseenter,mouseout与mouseleave的区别及用法
梦醒已隔万重秋的博客
09-13 439
jQuery 事件 - mouseout() 方法 定义和用法 当鼠标指针从元素上移开时，发生 mouseout 事件。 该事件大多数时候会与 mouseover 事件一起使用。 mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。 注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会
jquery mouseover与mouseenter,mouserout与mouseleave的区别
di84186的博客
05-29 104
mouseover与mouseenter不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件只有在鼠标指针穿过被选元素时，才会触发mouseenter事件 <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/ja...
浅谈JQ中mouseover和mouseenter的区别
09-01
在JavaScript和jQuery中，`mouseover` 和 `mouseenter` 都是处理鼠标悬停事件的常见方法，但它们之间存在微妙的差异，这些差异在某些情况下可能会对代码的行为产生重要影响。 `mouseover` 事件会在鼠标指针进入元素...
javascript中mouseenter与mouseover的异同
10-19
javascript中mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。mouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。mouseenter：鼠标移入监听对象时触发...
08-mouseenter和mouseover的区别.html
02-15
08-mouseenter和mouseover的区别.html
理解mouseover,mouseout,mouseenter,mouseleave
weixin_33912453的博客
05-13 162
mouseover定义和用法 当鼠标指针位于元素上方时，会发生 mouseover 事件。 该事件大多数时候会与 mouseout 事件一起使用。 mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。 注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 &l...
关于mouseenter、mouseover、mouseout、mouseleave的理解
weixin_44344236的博客
04-28 375
先说结论：enter、leave是元素区域上的进入和离开，over、out是逻辑上的进入和离开。 enter和leave只在离开元素区域时触发，比如下面这个子元素在父元素的区域中，那么进入、离开子元素是不会触发的，因为子元素在父元素的区域内。而out在离开元素或者子元素时就会触发，over在进入元素或者子元素时触发。 如果下面这种情况，那么要进入子元素就要离开父元素区域，所以会触发enter和leave。 为了证明不是因为div占了一行而对触发效果有影响，将子元素排到父元素下边，结果和上面的那个一样
mouseenter和mouseleave与mouseover和mouseout的区别
热门推荐
xm_w_xm的博客
04-19 2万+
一、mouseenter（指针穿过，子集不执行） 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。 mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。 注意：与mouseover事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时...
简单了解mouseover与mouseenter的使用场景
世界和我们都不该止步于此
04-17 958
我们知道鼠标经过和离开的事件有俩种： mouseenter与mouseover，那么这里俩个事件有什么区别呢？ mouseenter：给谁注册的事件，就必须经过谁，才能触发该事件 简单来说mouseenter不能冒泡，也就是说经过其子盒子，不会触发它的事件 而mouseover刚好相反，因为mouseover会冒泡。所以当你经过它的子盒子它也会触发相应事件： <style> *{ margin: 0; padding: 0; }
web前端之CSS之hover的使用和鼠标移入移出事件的区别、addEventListener、mouseenter、mouseleave、querySelector、split
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
08-24 4910
web前端之CSS之hover的使用和鼠标移入移出事件的区别、addEventListener、mouseenter、mouseleave、querySelector、split
mouseenter、mouseleave、mouseover和mouseout的区别
随风丶逆风的博客
05-08 1万+
mouseenter(进入)、mouseleave、mouseover(覆盖)和mouseout是常用来判断鼠标移出和移入的事件句柄，虽然功能上差不多，但是细节却有不同的地方。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随风丶逆风&l...
js中鼠标事件mouseover、mouseenter和mouseleave、mouseout的区别
JackieDYH的博客
05-25 1万+
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave 异同体现在两个方面： 1. 是否支持冒泡 2.事件的触发时机 mouseenter事件的情况 当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触...
mouseover/mouseenter & mouseout/mouseleave 区别和使用实例
Annie的博客
04-26 632
1、mouseover和mouseout的效果是对应的；mouseenter和mouseleave的效果是对应的。 2、两者在使用时若没有子元素，效果是相同的。 3、mouseover和mouseout在从父元素进入子元素或从子元素移除到父元素时都会触发。 4、mouseenter和mouseleave只与父元素相关，与子元素不相关，更常用。 复制下方实例，可在浏览器中体验两者...
Javascript>> onmouseover用法
CodingIsFun
07-22 4381
<!DOCTYPE html> <html> <head> <title>Window Title</title> </head> <body> <p>Test your mouse on me!</p> <script> const p = document.quer...
mouseover的替代用法
淡定的米哥
12-26 412
是不是想说mouseover?其实mouseover的性能是不理想的，可以参考使用下mouseenter和mouseleave可以实现相同的效果，且性能好。
JS中mouseout，mouseover和mouseenter，mouseleave的区别
最新发布
05-25
此外，`mouseenter`和`mouseleave`事件只在鼠标进入或离开一个元素的边界时触发，而`mouseover`和`mouseout`事件在鼠标经过元素内部时也会触发。 因此，如果你想在鼠标进入或离开一个元素时触发事件，并且不希望...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值