87,989
社区成员
发帖
与我相关
我的任务
分享javascript鼠标三击事件
鼠标连续点击三次事件怎么实现啊？我觉得应该用setTimeout和计数器变量来写，但想了好久还是没想出思路来，不知道怎么弄出来，求解啊。。。
...全文
请发表友善的回复…
发表回复
BLUE_LG 2011-09-30
- 打赏
- 举报
每击一次，改变一下变量，根据变量decide！！！
光曰不日 2011-09-30
- 打赏
- 举报
粗看下没问题，细想想真不会，楼主的需求有点蛋疼的，学习下。
峭沙 2011-09-30
- 打赏
- 举报
好吧，上面的又写错了。。
var count = 0, timer;
document.onclick = function(){
if(count < 2){
if(timer){
clearTimeout(timer);
}
count ++;
timer = setTimeout(function(){
count = 0;
}, 500);
}else if(count === 2){
count = 0;
clearTimeout(timer);
threeClick();
}
}
function threeClick(){
alert('three click');
}峭沙 2011-09-30
- 打赏
- 举报
上面少复制了一行。。
var count = 0, timer;
document.onclick = function(){
if(count < 3){
if(timer){
clearTimeout(timer);
}
count ++;
timer = setTimeout(function(){
count = 0;
}, 500);
}else if(count = 3){
count = 0;
alert('three click');
}
}峭沙 2011-09-30
- 打赏
- 举报
document.onclick = function(){
if(count < 3){
if(timer){
clearTimeout(timer);
}
count ++;
timer = setTimeout(function(){
count = 0;
}, 500);
}else if(count = 3){
count = 0;
alert('three click');
}
}
admin 2011-09-30
- 打赏
- 举报
很不错,呵呵,,,
KK3K2005 2011-09-30
- 打赏
- 举报
写程序不能太实际了
你们要看清楚
大于 1击的 就代表 N击事件（N表示一个 >1的整数)
剩下的去实现吧
你们要看清楚
大于 1击的 就代表 N击事件（N表示一个 >1的整数)
剩下的去实现吧
打字员 2011-09-30
- 打赏
- 举报
写着玩儿，LZ可以试试。。。
<!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>无标题文档</title>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="text" id='a' onclick='' value='三点。。。'/>
<div style="height:1000px;width:400px;">sdf</div>
<script type="text/javascript">
function ck(n, fn) {
this.fn = fn;
this.size = n;
this.index = 0;
this.flag = false;
this.id = null;
}
ck.prototype = {
action: function() {
this.flag = true;
this.index++;
if(this.index === this.size) {
this.reset();
s = [];
Array.prototype.push.apply(s, arguments);
this.fn.apply(s.shift(), s);
} else {
this.id = setTimeout((function(o, n) {
return function() {
o.time(n);
}
})(this, this.index), 200);
}
},
time: function(n) {
if(n >= this.index) {
this.reset();
}
},
reset: function() {
this.flag = false;
this.index = 0;
clearTimeout(this.id);
}
};
var cl = new ck(3, function(e, str) {
alert(this.value);
alert(e.button);
alert(str);
});
document.getElementById('a').onclick = function(e){
cl.action(this, e, 'dddd')
};
</script>
</body>
</html>
aj3423 2011-09-29
- 打赏
- 举报
写错，三击的定义是
function ClickState(sgl, dbl, tpl) {
function ClickState(sgl, dbl, tpl) {
aj3423 2011-09-29
- 打赏
- 举报
先来个 双击的
关于上面的写法，参考 javascript 解释器模式： http://www.uml.org.cn/sjms/200805214.asp
看懂双击再看三击就简单了
四击之类也很容易扩展
function ClickState(sgl, dbl) {
var me = this,
state = null,
timer0 = null;
function s0() {
timer0 = setTimeout(function() {
state = s0;
sgl();
}, 200);
state = s1;
}
function s1() {
clearTimeout(timer0);
state = s0;
dbl();
}
state = s0;
this.next = function() {
state();
};
}
function sgl() {console.info('single');}
function dbl() {console.info('double');}
state = new ClickState(sgl, dbl);
document.onclick = function() {
state.next();
};
关于上面的写法，参考 javascript 解释器模式： http://www.uml.org.cn/sjms/200805214.asp
看懂双击再看三击就简单了
function ClickState(sgl, dbl) {
var me = this,
delay = 200,
state = null,
timer = null;
function s0() {
timer = setTimeout(function() {
state = s0;
sgl();
}, delay);
state = s1;
}
function s1() {
clearTimeout(timer);
timer = setTimeout(function() {
state = s0;
dbl();
}, delay);
state = s2;
}
function s2() {
clearTimeout(timer);
timer = setTimeout(function() {
state = s0;
tpl();
}, 200);
state = s2;
}
state = s0;
this.next = function() {
state();
};
}
function sgl() {console.info('single');}
function dbl() {console.info('double');}
function tpl() {console.info('triple');}
state = new ClickState(sgl, dbl, tpl);
document.onclick = function() {
state.next();
};
四击之类也很容易扩展
豆虫 2011-09-29
- 打赏
- 举报
三击事件 这不是教人有些蛋疼么？
yuji821 2011-09-29
- 打赏
- 举报
用一个变量
var i =0;
单击一次加1
等于3时，发生事件，再i = 0;
var i =0;
单击一次加1
等于3时，发生事件，再i = 0;
