jq bind click dblclick

cztAI

于 2022-05-09 18:30:00 发布

阅读量733

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/czt_666/article/details/124662415

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

单击和双击绑定在同一元素会发生冲突，可以用一个定时器解决。

单击启动一个300ms的定时器，300ms后执行单击操作，如果300ms内再单击（即双击），取消定时器并执行双击操作。

var timer
$(document).ready(function){
	$("#btn").bind(
	
		'dblclick': function(){
			clearTimeout(timer)
			//这里可以写一些双击操作
		},
		
		'click': function(){
			var this_ = $(this)
			clearTimeout(timer)
			timer = setTimeout(function(){
			//这里可以写一些单击操作
			},300)
		}
			
	)
}

如果需要使用指针请注意，setTimeout 会导致指针丢失，所有要在 setTimeout 之前将指针赋值给一个新的变量

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>鼠标事件</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
var timer
$(document).ready(function(){
	$("p").mouseover(function(){
		var this_ = $(this)
		timer = setTimeout(function(){
			this_.css("background-color","yellow");
		},2000)
    
	});
	$("p").mouseout(function(){
		clearTimeout(timer);
    	$(this).css("background-color","");
	});
	
	$("p").click(function(){
		clearTimeout(timer);
    	$(this).css("background-color","green");
	});
});
</script>
</head>
<body>

<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>
<p>鼠标移动到这里</p>

</body>
</html>

参考资料：

cztAI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq bind click dblclick

单击和双击绑定在同一元素会发生冲突，可以用一个定时器解决。单击启动一个300ms的定时器，300ms后执行单击操作，如果300ms内再单击（即双击），取消定时器并执行双击操作。 0 300ms 单击再单击？单击操作双击操作var timer$(document).ready(function){ $("#btn").bind( 'dblclick': function(){ clearTimeout(timer) //这里可以写一些双击操作
复制链接

扫一扫