实例讲解jquery中mouseleave和mouseout的区别


Posted in Javascript onFebruary 17, 2016

本文详细的介绍了关于jQuery中mouseleave和mouseout的区别,分享给大家供大家参考,具体内容如下
很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件。而在实现过程中,可能会出现一些不理想的状况。
先看下使用mouseout的效果:

<p>先看下使用mouseout的效果:</p>
<div id="container" style="width: 300px;">
<div id="title" style="cursor: pointer; background: #ccc;">使用了mouseout事件↓</div>
<div id="list" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<div>第一行</div>
<div>第二行</div>
<div>第三行</div>
</div>
</div>
<p><script type='text/javascript'> 
jQuery(document).ready(function($) { 
   $("#title").mouseover(function() { 
     var offset = $(this).offset(); 
     $("#list").css({left: offset.left, top: offset.top+19}).show(); 
   }); 
   $("#container").mouseout(function() { 
     $("#list").hide(); 
   }); 
 }); 
</script>

第一行第二行第三行我们发现使用mouseout事件时,鼠标只要在下拉容器#list里一移动,就触发了hide(),其实是因为mouseout事件是会冒泡的,也就是事件可能被同时绑定到了该容器的子元素上,所以鼠标移出每个子元素时也都会触发我们的hide()。
从jQuery 1.3开始新增了2个mouse事件,mouseenter和mouseleave。与mouseout事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
我们来看一下mouseleave事件的效果:

<div id="container2" style="width: 300px;">
<div id="title2" style="cursor: pointer; background: #ccc;">使用了mouseleave事件↓</div>
<div id="list2" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<div>第一行</div>
<div>第二行</div>
<div>第三行</div>
</div>
</div>
<script type='text/javascript'> 
jQuery(document).ready(function($) { 
   $("#title2").mouseover(function() { 
     var offset = $(this).offset(); 
     $("#list2").css({left: offset.left, top: offset.top+19}).show(); 
   }); 
   // 绑定mouseleave事件,效果很好 
   $("#container2").mouseleave(function() { 
     $("#list2").hide(); 
   }); 
 }); 
</script>
<p>

第一行第二行第三行mouseleave和mouseout事件各有用途,因为事件冒泡在某些时候是非常有用的
解决div mouseout事件冒泡的问题
解决的办法是,使用jquery的bind方法
 如:现在有一个div对象需要监听他的鼠标事件

<div class="dpx2"><div class="dpx2_px" style="cursor:pointer;" id="searchSort">请选择排序方式↓</div>
      <div class="dpx2_px_xl" id="sortList" style="display:none;position:absolute;z-index:5;">
        <div><a class="sortA">按时间升序↑</a></div>
        <div><a class="sortA">按时间降序↓</a></div>
        <div><a class="sortA">按评论数量升序↑</a></div>
        <div><a class="sortA">按评论数量降序↓</a></div>
        <div><a class="sortA">按点击数升序↑</a></div>
        <div><a class="sortA">按点击数降序↓</a></div>
      </div>
    </div>

当鼠标移动到ID为searchSort的Div上时,显示下面的div。当鼠标移出下面的div时,隐藏div
JS为:

$(function(){
         var sortList = $("#sortList");
      $("#searchSort").mouseover(function() {
         var offset = $(this).offset();
        sortList.css("left", offset.left);
        sortList.css("top", offset.top+20);
        sortList.show();
      });
//关键的一句,绑定Div对象的mouseleave事件
      sortList.bind("mouseleave", function() {
        $(this).hide();
      });
    });

根据上述讲解,模拟实现下拉效果: 
1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

<div class="sel_box">
  <input type="button" value="请选择所属部门" id="sel_dept" />
  <div class="hide" id="sel_dept_sh" style="display: none;">
    <p>
      <font>深圳市公司 </font>
    </p>
    <p>
      <font>集团管理层 </font>
    </p>
  </div>
</div>
 
<script type="text/javascript">
$(".sel_box").click(function(event){
   if(event.target.id == 'sel_dept'){
     $("#sel_dept_sh").show(); //显示下拉框
     $("#sel_dept_sh p font").click(function(){
       $("#sel_dept").val('');
       var text = $(this).text();
      // alert(text);
       $("#sel_dept").val(text).css("color","#000");
       $("#sel_dept_sh").hide();
     });
 
   }else{
     $("#sel_dept_sh").hide();
   }
   
 
});
 
$(".sel_box").bind("mouseleave",function(){//用mouseleave就实现了模仿下拉框的效果
    $(this).find(".hide").hide();  
  });
 
$(".sel_box").bind("mouseout",function(){//而mouseout则不行,什么时候都会触发
    $(this).find(".hide").hide();  
  });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
document.all与WEB标准
May 13 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 #Javascript
Bootstrap中CSS的使用方法
Feb 17 #Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 #Javascript
基于javascript简单实现对身份证校验
Jan 25 #Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 #Javascript
Bootstrap布局组件应用实例讲解
Feb 17 #Javascript
深入php面向对象、模式与实践
Feb 16 #Javascript
You might like
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
ES6 十大特性简介
2020/12/09 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python实现股市信息下载的方法
2015/06/15 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Django框架封装外部函数示例
2019/05/28 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
python 实现return返回多个值
2019/11/19 Python
Python bytes string相互转换过程解析
2020/03/05 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
婚礼家长致辞
2015/07/27 职场文书
追悼会家属答谢词
2015/09/29 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
浅谈Redis的几个过期策略
2021/05/27 Redis
浅谈Python数学建模之线性规划
2021/06/23 Python
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python