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

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <script src="jquery-1.12.3.js"></script>

    <style>

    .unit-list{ width: 320px; border:1px solid #ccc;}

    .member-list dd{ background-color: #ccc; margin: 5px 0;}

    </style>

</head>

<body>

    <dl class="unit-list">

            <dt class="cf">行政学院

                <span class="toggle">+</span>

            </dt>

            <dd>

                <dl class="member-list">

                    <dd>张三</dd>

                    <dd>李四</dd>

                    <dd>王五</dd>

                </dl>

            </dd>

        </dl>

<script>

$(function(){

        $(".unit-list").hover(function(e){

            e.stopPropagation()

            console.log("E n t e r");

            $(".member-list dd").mouseenter(function(e){

                e.stopPropagation()

                console.log(this); //鼠标移出unit-list再移入到<dd>，输出次数会叠加

            });

        },function(){

            console.log("L e a v e");

        });

})

</script>

</body>

</html>

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

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

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

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

单独绑定

 $(function(){

    $('.member-list dd').on('mouseenter',function(){

        console.log(this);

    });

    $('.unit-list').hover(function(){

        console.log('E n t e r');

    },function(){

        console.log('L e a v e');

    });

});

hover后撤销绑定

<script>

$(function(){

    var fMouseEnter = function(e){

        console.log(this);

    };

    var jDd = $('.member-list dd');

    $('.unit-list').hover(function(e){

        jDd.on('mouseenter',fMouseEnter);

        console.log('E n t e r');

    },function(){

        jDd.off('mouseenter',fMouseEnter);

        console.log('L e a v e');

    });

});

</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. Vue 在手机上键盘把底部菜单顶上去的解决方案

    Vue 在手机上键盘把底部菜单顶上去的解决方案 ios和安卓的键盘的区别 ios和安卓的键盘的区别弹起方式不同, ios直接弹出键盘, 不影响页面, 而安卓键盘弹起时会把页面顶起来, 这样就会把底部菜 ...

  2. LR 场景设置

    LR 场景设置group:多个脚本按照独立设置模式跑,各个脚本可以单独设置虚拟用户.运行时间scenario:多个脚本之间按照相同模式跑,将总的虚拟用户数按照一定比例分配给各个脚本 schedule ...

  3. 构建一个简单的Spring Boot项目

    11 构建一个简单的Spring Boot项目 这个章节描述如何通过Spring Boot构建一个"Hello Word"web应用,侧重介绍Spring Boot的一些重要功能. ...

  4. PHP应该学什么，如何学好PHP

    http://blog.sina.com.cn/s/blog_76bdabf70101azl4.html(注:原文来自传智播客) 本文转自http://blog.sina.com.cn/s/blog_ ...

  5. 第十一章 存储之ConfigMap

    1.描述信息 ConfigMap 功能在 Kubernetes1.2 版本中引入,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息.ConfigMap API 给我们提供了向容器中注入配置 ...

  6. 横纵方向走马灯滚动，纯javascript代码

    <body onload="beginmarquee()"> <table width="1024" border="0" ...

  7. fiddler 抓取手机http/https包

    测试需求: 安装有 fiddler  的电脑台  博主fiddler 4: 手机系统不限制智能手机就行,能连接wifi即可: 首先在fiddler这边配置一下(请不要问我为什么没有汉化毕竟free) ...

  8. 使用JAVA如何对图片进行格式检查以及安全检查处理

    一.通常情况下,验证一个文件是否图片,可以通过以下三种方式: 1).判断文件的扩展名是否是要求的图片扩展名 这种判断是用得比较多的一种方式,不过这种方式非常的不妥,别人稍微的把一个不是图片的文件的扩展 ...

  9. Cisco基础(六)：配置目前网络环境、项目阶段练习

    一.配置目前网络环境 目标: 一家新创建的IT公司,公司位于北京有80多台服务器 目前网络环境使用技术,通过端口映射技术将web服务器发布给Internet: 三层交换:汇聚接入层交换机 默认路由:实 ...

  10. imp需要

    导入全部: imp user/password@10.10.10.10:1521/orcl file = C:\Users\Administrator\Desktop\20170404230000.d ...