JQuery在hover（in）状态下添加click事件的多次触发现象

最新推荐文章于 2021-09-16 17:08:56 发布
最新推荐文章于 2021-09-16 17:08:56 发布
阅读量215 收藏
点赞数
文章标签： javascript java xhtml ViewUI 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>event多次触发</title>
<style type="text/css">
	.out {
		width:100px;
		height:100px;
		padding:10px;
		border:solid 1px #CCC;
	}
	.inner {
		width:50px;
		height:50px;
		border:solid 1px #555;
	}
	.show {
		background:#EEE;
		width:200px;
		height:200px;
		padding:10px;
		margin-top:20px;
		border:solid 1px #F00;
	}
</style>
<script type="text/javascript" src="js/jQuery-1.7.1.js"></script>
<script type="text/javascript">
	$(function() {
		var num_c = 0;	//记录click事件触发次数
		var num_i = 0;	//记录hover（in）事件触发次数
		var num_o = 0;  //记录hover（out）事件触发次数
		var html = '';	//显示在.show中的信息
		$('.out').hover(function() {
			$(this).css('border' , 'solid 1px #F00');
			$('.inner').click(function() {
				num_c += 1;
			});
			num_i += 1;
		} , function() {
			$(this).css('border' , 'solid 1px #CCC');
			num_o += 1;
			html += 'hover(in)触发次数为：' + num_i + '<br />';
			html += 'hover(out)触发次数为：' + num_o + '<br />';
			html += 'click触发次数为：' + num_c + '<br />';
			$('.show').html(html);
			init();
		});
		
		//初始化
		function init() {
			num_c = 0;	//记录click事件触发次数
			num_i = 0;	//记录hover（in）事件触发次数
			num_o = 0;  //记录hover（out）事件触发次数
			html = '';	//显示在.show中的信息
		}
	});
</script>
</head>

<body>
<div class="out">
	<div class="inner"></div>
</div>
<div class="show"></div>
</body>
</html>



当第一次hover并点击的时候，click为1。

每当click一次后，下一次click触发次数将+1（不完全规律，没仔细测过，但是多次触发是一定的现象）

如图，为我click了多次后，显示的各事件触发次数。


2012-09-11 11:00

在 php-]屌丝(249722824) 的指导下，得到一个解决办法。

php-]屌丝(249722824)10:54:36
那在这个click之前写个$('.inner').unbind('click');
取消所有click绑定

在此，非常感谢 php-]屌丝(249722824)

php-]屌丝(249722824)  10:59:30
= =不客气。。玩js经常碰到事件冒泡
阻止掉或者干脆先取消事件绑定，再绑定需要的事件就可以了

php-]屌丝(249722824)  11:00:22
最好少用取消绑定，逻辑干净点。取消绑定多了会占用资源
Java+Jq→南宫(837554378)  11:01:09
哦。那我这个逻辑是哪里错误了吗？
php-]屌丝(249722824)  11:01:42
我在看
Java+Jq→南宫(837554378)  11:02:21
恩。
php-]屌丝(249722824)  11:02:34
你hover之后给所有inner加了一个click
知道？
Java+Jq→南宫(837554378)  11:02:49
恩。是啊
php-]屌丝(249722824)  11:03:04
鼠标移出去，再hover又给所有inner加了click
知道？
Java+Jq→南宫(837554378)  11:03:45
哦。我大概明白了。
就是我每hover一次，我就绑定了一次。就相当于多加了一次click
是这意思吧？
php-]屌丝(249722824)  11:04:24
jqeury的绑定click事件会累加
绑定任何事件都这样
Java+Jq→南宫(837554378)  11:04:44
.click() == .blind('click',function())??

哦哦。原来如此。受教了。
php-]屌丝(249722824)  11:04:53
就和你写多个$(function(){}) 一样
Java+Jq→南宫(837554378)  11:05:03
哦哦。
php-]屌丝(249722824)  11:05:04
先后执行  不会擦掉之前的ready
Java+Jq→南宫(837554378)  11:05:20
哦。明白了。
php-]屌丝(249722824)  11:05:25
要么逻辑干净点，要么手动取消绑定


以上为聊天记录，觉得看记录或许比我自己复述要好些。

可能上面有些人会看的迷迷糊糊的，其实一个快捷的解决办法就是，将hover内的click事件提出来，放到hover外面，就好了，如下所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>event多次触发</title>
<style type="text/css">
	.out {
		width:100px;
		height:100px;
		padding:10px;
		border:solid 1px #CCC;
	}
	.inner {
		width:50px;
		height:50px;
		border:solid 1px #555;
	}
	.show {
		background:#EEE;
		width:200px;
		height:200px;
		padding:10px;
		margin-top:20px;
		border:solid 1px #F00;
	}
</style>
<script type="text/javascript" src="js/jQuery-1.7.1.js"></script>
<script type="text/javascript">
	$(function() {
		var num_c = 0;	//记录click事件触发次数
		var num_i = 0;	//记录hover（in）事件触发次数
		var num_o = 0;  //记录hover（out）事件触发次数
		var html = '';	//显示在.show中的信息
		$('.out').hover(function() {
			$(this).css('border' , 'solid 1px #F00');
			num_i += 1;
		} , function() {
			$(this).css('border' , 'solid 1px #CCC');
			num_o += 1;
			html += 'hover(in)触发次数为：' + num_i + '<br />';
			html += 'hover(out)触发次数为：' + num_o + '<br />';
			html += 'click触发次数为：' + num_c + '<br />';
			$('.show').html(html);
			init();
		});
                  $('.inner').click(function() {
			num_c += 1;
		});

		//初始化
		function init() {
			num_c = 0;	//记录click事件触发次数
			num_i = 0;	//记录hover（in）事件触发次数
			num_o = 0;  //记录hover（out）事件触发次数
			html = '';	//显示在.show中的信息
		}
	});
</script>
</head>

<body>
<div class="out">
	<div class="inner"></div>
</div>
<div class="show"></div>
</body>
</html>

iteye_8877
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于jq hover事件里click多次触发的问题
desongzhang的博客
03-04 360
在学习jq轮播图淡入淡出效果的时候，代码如下： <script> var index = 0; var run = function () { index++; if (index > $("ul>li").length - 1) { index = 0; } $("ul>li").eq(index).stop(true
【无标题】
最新发布
m0_64498162的博客
10-28 171
分别给标签添加hover事件
解决click与hover的使用冲突
qq_45067263的博客
06-01 1257
项目场景： 点击切换图片，同时需要hover的时候先展示效果 问题描述： 问题出现在hover的时候改变图片划过去变回原样冲突，本来点击已经切换了图片但是hover划走的时候图片又给切换回去了 解决方案： hover的时候判断点击切换样式的class名有没有添加上，添加上就不进行便会操作即可 <button id="buttonimg" :class="sortordtype==1?'sortordstyle':''" @click="sortordclick(1)">最新 <i
jquery 给动态生成元素添加hover click 事件
weixin_35704268的博客
09-16 616
鼠标移入-- $(".comheader").on("mouseover", ".clickBtn", function () { console.log("鼠标移入"); }); $(".comheader").on("mouseout", ".clickBtn", function () { console.log("鼠标移出"); }); 点击事件-- $(".comheader").delegate(".clickBtn",...
jquery hover事件与click事件冲突解决
青年小七
09-21 6808
在所写的代码中加个标识，将click事件和hover事件的逻辑进行隔离。 以下是代码：var isMouseOver = true; //控制鼠标移上移下事件和click事件的冲突 //滑过刻度表 $(".smallTime").hover(function(){ isMouseOver = true //程序处理逻辑 },function
jquery中trigger()无法触发hover事件的解决方法
10-24
在jQuery中，`trigger()`方法是用来触发被选元素上的指定事件类型的。这个方法非常有用，因为它可以执行绑定到这些元素的所有处理程序和行为。然而，当尝试触发`hover`事件时，开发者可能会遇到一些问题。`hover`...
jquery中的常用事件bind、hover、toggle等示例介绍
10-25
本文将详细阐述jQuery中几个常见的事件处理方法，包括`$(document).ready()`、`.bind()`、`.hover()`、`.toggle()`以及`.click()`，并给出相应的示例。 1. `$(document).ready()` `$(document).ready()`函数用于...
hover和点击事件之间的冲突
青枫浦
02-11 9387
本文转自 博客园 原作者：渣渣猿 我们有个li 现在需要一个点击发生改变和另一个仍然可以进行hover 商品点击后会变色，然后商家依然可以进行hover。 不可取的方法为： (1) JQ添加点击事件改变其css( ) 这种方法不可用，因为通过javascript修改background-color会覆盖在css中定义的所有background-color属性，当然也包含hover下的
js hover 触发事件_JQ基础（5）事件的传播
weixin_39658759的博客
11-23 3924
在说明基于通常不可单击的页面元素处理单击事件的能力时，我们构思的界面中已经给出了一些提示——样式表切换器标签（即元素）实际上都是活动的，随时等待用户操作。为了改进界面，我们可以为按钮添加一种翻转状态，以便清楚地表明它们能与鼠标进行某种方式的交互： .hover { cursor: pointer; background-color: #afa; } CSS规范加入了一个名叫:ho...
hover和点击事件之间的冲突解决办法
四域公子的博客
02-21 2398
1、最简单的方式就是在在CSS的hover里面加上 !important; 如： .layerTool:hover{ background: #5FB878 !important; }
hover触发两次的问题
jerry的博客
07-02 2330
一个页面想通过hover来代替click ,遇到多次触发的问题，下面是处理代码 思路 1.鼠标移动到指定标签设置定时器 2.移除后清除定时器，防止重复触发 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ ...
基于jQuery的连续hover触发重复动画
捷搜索
09-05 1731
问题： 当我们设置hover实现动画效果的时候，我们把鼠标快速反复在目标元素移来移去，会发现鼠标最后离开后，动画依然在进行很多次，有时会导致动画错乱。 原因&amp;办法： 之所以会出现这种情况，是因为我们每次触发hover时都会执行一次动画，当我们来回这样快速移动到目标元素上时并反复操作，这时会导致动画重复多次，而由于我们移动到目标元素上时比较快速的，这就导致，上一次动画未结束，这次动画就...
前端query事件
weixin_42008209的博客
05-15 1004
query事件 事件函数列表： blur() 元素失去焦点 focus() 元素获得焦点 change() 表单元素的值发生变化 click() 鼠标单击 dblclick() 鼠标双击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素...
用hover动画事件 鼠标浮上 多次执行
写了个 bug
02-08 1765
$(".jewel_new_li").hover(function(){ $(this).find(".jewel_hide").show().stop().animate({marginTop:"-65px"},300); $(this).find(".jewel_p_ren").hide(); },function(){ ...
jQuery事件处理详解：从dblclick到hover
除了上述方法，jQuery还提供了一些高级的事件处理功能，如事件委托(`delegate()`, `on()`)，这允许在父元素上绑定事件处理器，以便处理子元素的事件，即使这些子元素在事件绑定之后动态添加到DOM中。 另外，jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值