已知晓在jq中hover的API就是把mouseenter和mouseleave组合在一起来用的，在jq中实现`hover:function(fnOver，fnOut){
return this.mouseenter(fnOver).mouseleave(fnOut||fnover)
}。

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <script src="jquery-1.12.3.js"></script>
  7.     <style>
  8.     .unit-list{ width: 320px; border:1px solid #ccc;}
  9.     .member-list dd{ background-color: #ccc; margin: 5px 0;}
  10.  
  11.     </style>
  12. </head>
  13. <body>
  14.     <dl class="unit-list">
  15.             <dt class="cf">行政学院
  16.                 <span class="toggle">+</span>
  17.             </dt>
  18.             <dd>
  19.                 <dl class="member-list">
  20.                     <dd>张三</dd>
  21.                     <dd>李四</dd>
  22.                     <dd>王五</dd>
  23.                 </dl>
  24.             </dd>
  25.         </dl>
  26.  
  27. <script>
  28. $(function(){
  29.         $(".unit-list").hover(function(e){
  30.             e.stopPropagation()
  31.             console.log("E n t e r");
  32.             $(".member-list dd").mouseenter(function(e){
  33.                 e.stopPropagation()
  34.                 console.log(this); //鼠标移出unit-list再移入到<dd>，输出次数会叠加
  35.             });
  36.         },function(){
  37.             console.log("L e a v e");
  38.         });
  39. })
  40.  
  41. </script>
  42.  
  43. </body>
  44. </html>

问题在于，代码执行后。当鼠标移动的时候，代码即执行。

与我们想要的，当鼠标进入后，内部不执行的效果不一致。

每次mouseenter的时候，都会给dd增加绑定事件，绑定事件是不会被覆盖的，而是会按照绑定先后顺序执行，所以就会执行很多次，event.stopPropagation是阻止冒泡，不会阻止同一个节点上的其他事件。

题主一可以把给dd的绑定事件独立于hover之外，二是可以在hover结束后给dd解绑。请看如下代码：

单独绑定

  1.  $(function(){
  2.     $('.member-list dd').on('mouseenter',function(){
  3.         console.log(this);
  4.     });
  5.     $('.unit-list').hover(function(){
  6.         console.log('E n t e r');
  7.     },function(){
  8.         console.log('L e a v e');
  9.     });
  10. });

hover后撤销绑定

  1. <script>
  2. $(function(){
  3.     var fMouseEnter = function(e){
  4.         console.log(this);
  5.     };
  6.     var jDd = $('.member-list dd');
  7.     $('.unit-list').hover(function(e){
  8.         jDd.on('mouseenter',fMouseEnter);
  9.         console.log('E n t e r');
  10.     },function(){
  11.         jDd.off('mouseenter',fMouseEnter);
  12.         console.log('L e a v e');
  13.     });
  14. });
  15. </script>

原文地址：https://yq.aliyun.com/ask/18480

jquery hover中嵌套mouseenter，mouseenter函数执行多次的问题解决方案的更多相关文章

  1. jquery ajax中success与complete的执行顺序

    jquery ajax中success与complete的执行顺序 jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) ...

  2. js进阶 13-1 jquery动画中的显示隐藏函数有哪些

    js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...

  3. AngularJS指令嵌套时link函数执行顺序的问题

    今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...

  4. 在Loadrunner中如何用system函数执行系统命令

    前提: windows 系统 实现功能:用 LR 中的system函数执行系统命令 相关功能:在LR中利用C函数建立文件,写文件,读文件. 主要相关函数:sprintf/fopen/fgetc/fre ...

  5. Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

    定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 ...

  6. jquery ajax中success与complete的执行顺序 (转)

    http://blog.sina.com.cn/s/blog_4adc4b090101dhnh.html https://q.cnblogs.com/q/21810/ **************** ...

  7. JS中For循环中嵌套setTimeout()方法的执行顺序

    在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...

  8. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  9. JQuery中bind和unbind函数与onclick绑定事件区分

    JQuery中bind和unbind函数转载:   https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...

随机推荐

  1. web前端知识体系大全【转载】

    自己总结的web前端知识体系大全[欢迎补充]   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在 ...

  2. php分割url，获取参数query

    #测试网址: http://localhost/blog/testurl.php?id=5 //获取域名或主机地址echo $_SERVER['HTTP_HOST']."<br> ...

  3. C++中的静态成员函数

    1,问完成的需求: 1,统计在程序运行期间某个类的对象数目: 1,静态成员变量满足了这个需求: 2,保证程序的安全性(不能使用全局变量): 3,随时可以获取当前对象的数目: 1,有没有什么特别的地方或 ...

  4. 新手学习 React 迷惑的点

    网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打 ...

  5. SpringMVC学习（10）：异常处理

    在项目中如何处理出现的异常,在每个可能出现异常的地方都写代码捕捉异常?这显然是不合理的,当项目越来越大是也是不可维护的.那么如何保证我们处理异常的代码精简且便于维护呢?这就是本篇要讲的内容->异 ...

  6. Python基础篇(初始函数)

    Python初始函数: 一.什么是函数 1.我们到目前为止, 已经可以完成一些软件的基础功能了. 那么我们来完成这样一个功 能: 约x: print("拿出手机") print(& ...

  7. MySQL-事件总结

    是什么?事件是一组SQL集合,简单说就是mysql中的定时器,时间到了就执行. 一:查询事件变量,如果查询不到变量,说明数据库版本过低,不支持事件. SHOW VARIABLES LIKE 'even ...

  8. Java：新建数组

    Array Initialization int[] a; = int a[]; int[] a = new int[100]; a[]的值会被初始化为0 `int[] smallPrimes = { ...

  9. openwrt 编译支持sqlite3

    编译版本加载lib库 ------------------------------Libraries----------------------------------- Filesystem  -- ...

  10. 云数据库POLARDB产品解读之二：如何做到高性价比

    现在做任何事情都要看投入产出比,对应到数据库上其实就是性价比.POLARDB作为一款阿里自研数据库,经常被问的问题是:性能怎么样?能不能支撑我的业务?价格贵不贵?很显然,在早期调研阶段,对稳定性.可靠 ...