已知晓在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. 还抱着 Java 8 不放,也是醉了!

    作者 | Trisha Gee原文:https://dzone.com/articles/beyond-java-8译者 | 弯月 责编 | 屠敏出品 | CSDN(ID:CSDNnews) 不说 A ...

  2. sql优化 分字段统计查询

    select count(1) from pd_xxx_origin_xxx_data where create_time like '2019-02-23%' and source='20036' ...

  3. 数组归一 reduce (数组归一) reduceRight(从右至左)

    var addTwoNumbers = function(l1, l2) { var e = l1 .reverse() .map((v, index, array) => v * Math.p ...

  4. 卸载 Bash On Ubuntu On Windows

    1.打开cmd,输入lxrun /uninstall /full,然后根据提示输入y即可开始卸载. 已失效

  5. 2019-9-2-win10-uwp-颜色转换

    title author date CreateTime categories win10 uwp 颜色转换 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 1 ...

  6. 五、通过密码访问API

    通过密码访问API 一.客户端 图: 客户端请求代码: static void Main(string[] args) { Console.WriteLine("确定三个项目都已经启动&qu ...

  7. JDBC中如何进行事务处理?

    Connection提供了事务处理的方法,通过调用setAutoCommit(false)可以设置手动提交事务:当事务完成后用commit()显式提交事务:如果在事务处理过程中发生异常则通过rollb ...

  8. @ResponseEntity返回值(怪异)

    定制相应头 /** * 将返回数据放在响应体中 * * ResponseEntity<String>:响应体中内容的类型 * @return */ //@ResponseBody @Req ...

  9. 使用jxls导出Excel报表

    导入jar包: <dependency> <groupId>net.sf.jxls</groupId> <artifactId>jxls-core< ...

  10. linux软件包rpm的使用

    一rpm包管理器 (一)rpm的介绍 rpm不仅是文件的后缀,也是一个工具,外部命令,程序包管理器 功能:将编译好的应用程序的各组成文件打包一个或几个程序包文件,从而方便快捷地实现程序包的安装.卸载. ...