jquery hover中嵌套mouseenter,mouseenter函数执行多次的问题解决方案
已知晓在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函数执行多次的问题解决方案的更多相关文章
- jquery ajax中success与complete的执行顺序
jquery ajax中success与complete的执行顺序 jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) ...
- js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...
- AngularJS指令嵌套时link函数执行顺序的问题
今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...
- 在Loadrunner中如何用system函数执行系统命令
前提: windows 系统 实现功能:用 LR 中的system函数执行系统命令 相关功能:在LR中利用C函数建立文件,写文件,读文件. 主要相关函数:sprintf/fopen/fgetc/fre ...
- Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别
定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 ...
- jquery ajax中success与complete的执行顺序 (转)
http://blog.sina.com.cn/s/blog_4adc4b090101dhnh.html https://q.cnblogs.com/q/21810/ **************** ...
- JS中For循环中嵌套setTimeout()方法的执行顺序
在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
- JQuery中bind和unbind函数与onclick绑定事件区分
JQuery中bind和unbind函数转载: https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...
随机推荐
- luoguP1541 乌龟棋 题解(NOIP2010)
P1541 乌龟棋 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include<cma ...
- luoguP1525 关押罪犯 题解(NOIP2010)(并查集反集)
P1525 关押罪犯 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include<c ...
- 了解JSON Web令牌(JWT)
JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.今天给大家介绍JWT的原理和用法. 1.跨域身份验证 Internet服务无法与用户身份验证分开.一般过程如下. 1.用户向服 ...
- Hadoop伪分布式环境安装
一.环境准备 阿里云ECS(Centos7).已预装JDK8 Hadoop安装包 hadoop-2.7.7.tar.gz 二. 安装步骤 1.确认JDK环境的安装位置 命令 echo $JAVA_HO ...
- 饿汉单例模式 and 懒汉单例模式
饿汉单例模式:主要就是利用static关键字,在类加载的时候生成实例,调用效率高 但是如果一直没有调用getInstance方法的话,就会造成资源浪费 具体实现如下: class Single{ pr ...
- ARM与X86 CPU架构区别
CISC(复杂指令集计算机)和RISC(精简指令集计算机)是当前CPU的两种架构.它们的区别在于不同的CPU设计理念和方法.早期的CPU全部是CISC架构,它的设计目的是 CISC要用最少的机器语言指 ...
- 转载:java面试题(二)
这部分主要是开源Java EE框架方面的内容,包括Hibernate.MyBatis.Spring.Spring MVC等,由于Struts 2已经是明日黄花,在这里就不讨论Struts 2的面试题, ...
- plsql exception
EXCEPTION aligns with BEGIN ... END blocks. There is no BEGIN inside your loop, so there should be n ...
- Git--将已有的项目添加到github(转)
转自:https://blog.csdn.net/north1989/article/details/53471439 1. 目标: 把本地已经存在的项目,推送到github服务端,实现共享. 2. ...
- python学习--第二天 爬取王者荣耀英雄皮肤
今天目的是爬取所有英雄皮肤 在爬取所有之前,先完成一张皮肤的爬取 打开anacond调出编译器Jupyter Notebook 打开王者荣耀官网 下拉找到位于网页右边的英雄/皮肤 点击[+更多] 进入 ...