js实现按钮button单击/双击操作
ji实现双击：300ms后判断用户点击次数和时间，若第一次点击300ms后无操作，视为单击，有操作则视为双击。但这样也带来了问题，当用户点击后，会有一个300ms的延迟，虽然这个可以忽略不计，但总是有些令人不爽。
我自己创建的一个方法，由于js这门语言的一些局限性，以及我的才疏学浅，能想到的方案就是：
1、制作一个秒表函数，在页面中判断用户的点击时间，根据点击的时间以及点击的次数做出判断。
2、用定时器去解决：300ms后判断用户点击次数和时间，若第一次点击300ms后无操作，视为单击，有操作则视为双击。但这样也带来了问题，当用户点击后，会有一个300ms的延迟，虽然这个可以忽略不计，但总是有些令人不爽。
我采取第二个方法实现，本人小白一枚，还请大神不要嘲笑
源码：
<script>
var button = document.querySelector('button');
var tips = [];
button.addEventListener("click", function() {
tips.push(+new Date());
//判断数组里面是不是偶数
window.setTimeout(function() {
if (tips.length > 2) {
tips.length = 0;
}
if (tips.length == 2) {
if (tips[tips.length - 1] - tips[tips.length - 2] <= 300) {
alert('恭喜您双击了一下');
tips.length = 0;
return;
}
}
//回调函数区块
if (tips.length == 1) {
alert("您单击了");
tips.length = 0;
}
}, 300);
})
</script>
效果图：
同样，三击操做也可以延伸，加大延迟和判断就好了。
刚刚想了想原生有doubleclick，又气不过，回来将程序封装一下，做的高大上一点，真烦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双击猜想</title>
</head>
<body>
<button>点击此处</button>
</body>
<script>
var button = document.querySelector('button');
function douorclick(obj, d, o) {
//封装一个单双击操作
var tips = [];
obj.addEventListener("click", function() {
//收集时间戳
tips.push(+new Date());
//调研延时函数
window.setTimeout(function() {
//判断数组长度，防止程序出差
if (tips.length > 2) {
tips.length = 0;
}
//判断是否双击操作
if (tips.length == 2) {
//执行双击函数
d();
tips.length = 0;
return;
}
//判断是否单击操作
if (tips.length == 1) {
//执行单击函数
o();
tips.length = 0;
}
//如果嫌弃时间长，将下面的时间改小就可，我想只要不是帕金森，300ms之内还是能完成双击的
}, 200);
});
}
douorclick(button, function() {
alert('您双击了');
}, function() {
alert("您单击了");
})
</script>
</html>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)