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

本文详细的介绍了关于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>

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, mouseleave
mouseout
mouseout mouseleave、mouseleave和mouseout、mouseleave、jquery mouseleave、mouseleave事件,以便于您获取更多的相关知识。

时间: 2025-01-29 15:47:23

实例讲解jquery中mouseleave和mouseout的区别_jquery的相关文章

jQuery中mouseleave和mouseout的区别详解

很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果:  代码如下 复制代码 <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;"> <div id="title" style="curso

实例讲解jQuery中对事件的命名空间的运用_jquery

用 jQuery 绑定和解绑事件监听器都是非常简单的.但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间. 看下面这段代码: $("#element") .on("click", doSomething) .on("click", doSomethingElse); 像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发

实例讲解Jquery中隐藏hide、显示show、切换toggle的用法_jquery

本文实例为大家分享了jquery中show().hide()和toggle()用法实例,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>初识jQuery</title> <script src="http:/www.jb51.net/

实例讲解JQuery中this和$(this)区别_jquery

平时很少在jquery中用到this.查看代码时发现用到了,就调试出this的值,心想原来如此.还是挺有用的.这里总结一下this与$(this)的区别和使用. $(this)生成的是什么? $()生成的是什么呢?实际上$()=jquery(),就是说返回的是一个jquery的对象. 通常我们为了简便直接使用$().实际上,该函数省略了一个参数context.根据选择器选取匹配的对象即$(selector, context),以jQuery包装集的形式返回. context可以是Dom对象集合或

实例解析jQuery中如何取消后续执行内容_jquery

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> //点击a标签,不进行页面跳转 window.onload = function () { var obj = document.getElementById("myhref"); obj.o

实例讲解Lua中pair和ipair的区别_Lua

采用pair: 复制代码 代码如下: function print_contents(params)      for k, v in pairs(params) do          print(k, "  ", v)      end  end    print_contents({20, 40, 50})  采用inpari: 复制代码 代码如下: local tt =    {        [1] = "test3",        [4] = &quo

浅析JQuery中的html(),text(),val()区别_jquery

1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档. 2.TEXT text():取得所有匹配元素的内容. 结果是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML文档都有效. text(val):设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 "<" 和 &

jQuery中serializeArray()与serialize()的区别实例分析_jquery

本文实例讲述了jQuery中serializeArray()与serialize()的区别.分享给大家供大家参考,具体如下: serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. 具体实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

jQuery中parents()和parent()的区别分析_jquery

本文实例分析了jQuery中parents()和parent()的区别,分享给大家供大家参考.具体分析如下: 其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些. 一.parents()函数: 此函数能够获取匹配元素的所有父元素,代码示例: 复制代码 代码如下: $(".mayi").parents().css("color",