分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

jquery hover中嵌套mouseenter,mouseenter函数执行多次的问题解决方案

发布时间:2023-09-06 01:53责任编辑:熊小新关键词:暂无标签

已知晓在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函数执行多次的问题解决方案

原文地址:https://www.cnblogs.com/liyouwu/p/9024223.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved