</>code
- <!DOCTYPE html><html><head>
- <title></title>
- <meta charset="utf-8"></head><body>
- <input type="button" onclick="test1()" ondblclick="test2()" value="点击">
- <script type="text/javascript">
- function test1 () {
- console.log('单击');
- } function test2 () {
- console.log('双击');
- } </script></body></html>
</>code
- <!DOCTYPE html><html><head>
- <title>判断单击or双击</title>
- <meta charset="utf-8"></head><body>
- <input type="button" onclick="test()" ondblclick="test()" value="点击">
- <div id="mxh"> </div>
- <script type="text/javascript">
- function test() {
- if(event.type == "dblclick")
- document.all.mxh.innerText = "你双击了我"; if(event.type == "click")
- document.all.mxh.innerText = "你单击了我";
- }
- </script></body></html>
这是一个笨办法,也就是通过事件的类型来判断是单击还是双击,然后将结果存到一个div里,结束后取div里的值来判断是哪种类型。
</>code
- <!DOCTYPE html><html><head>
- <title>判断单击or双击</title>
- <meta charset="utf-8"></head><body>
- <input type="button" onclick="aa()" ondblclick="bb()" value="点我">
- <script type="text/javascript">
- var timer = null;
- function aa() {
- clearTimeout(timer);
- if (event.detail == 2) return ;
- timer = setTimeout(function() {
- console.log('单击');
- }, 300);
- }
- function bb() {
- clearTimeout(timer);
- console.log('双击');
- } </script></body></html>
单击:用户单击触发aa函数,清除定时器这个先不管,if里的意思是如果在同样的地方执行同种方法两次,也就是双击的意思,退出这个函数,单击嘛不会触发if。下来给定时器赋值,300ms后执行输出单击的这句话,如果单击的话就不会在300ms里触发其他事件,所以单击解释完毕。
双击:用户双击触发两次click和一次dbclick。第一次先执行aa函数,因为这是第一次所以不会return,300ms之间还没有等单击这两个字输出便再次触发了aa函数,次数记为两次,return出去,之后触发bb函数,输出双击两个字。
</>code
- <!DOCTYPE html><html><head>
- <title>判断单击or双击</title>
- <meta charset="utf-8"></head><body>
- <input type="button" onclick="aa()" ondblclick="bb()" value="点我">
- <script type="text/javascript">
- var isdb;
- function aa(){
- isdb=false;
- window.setTimeout(cc, 500); function cc(){
- if(isdb) return;
- alert("单击")
- }
- }
- function bb(){
- isdb=true;
- alert("双击")
- }
- </script></body></html>
先设定一个判断变量,定义三个函数aa,bb,cc。
单击:进入aa函数,设置判断变量为false,设置一个定时器,500ms后触发cc函数,因为是单击所以之后没有了多余的操作,进而顺利进入cc函数,判断变量如果为真说明进入过bb函数也就是执行过dbclick的步骤,所以return,然而这里直接跳过去执行了输出单击的操作。
双击:进入aa函数,将判断变量赋值为false,设置定时器,500ms之内又进入了aa函数然而一直没有执行cc函数,之后又执行了bb函数,设置了判断变量为真值,弹出双击二字,这时才开始进入cc函数,因为判断变量为真值,所以两次都会return出去。
情况一
如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox)。
解决方法:
</>code
- <button onclick="test(1)" ondblclick="test(2)"></button>
- <script language="javascript">
- var i = 1;
- function test(n) {
- i = n;
- var val = setTimeout("call();",250);
- if(i==2){
- clearTimeout(val);
- }
- }
- function call() {
- if(i==1){
- alert('click');
- }else if(i==2){
- alert('dblclick');
- }
- }
- </script>
解释:
第一次点击记录下点击的时间,并设置单击事件的Timeout(250ms比较合适),第二次点击时判断此时点击的时间与上次点击的时间间隔,如果小于指 定的事件间隔(比如250ms),则判断为双击事件,并clear已设置的Timeout(避免触发单击事件)。
第二种:
</>code
- <title>区分单击和双击-www.jb51.net</title>
- <script type="text/javascript">
- var flag=0;
- function clickTest()
- {
- if(!flag)
- {
- setTimeout("tt2();",300);
- }
- flag++;
- }
- function reset()
- {
- flag=0;
- }
- function singleClick()
- {
- var result=document.getElementByIdx_x('result');
- result.innerHTML=result.innerHTML+"click<br>";
- reset();
- }
- function dobuleClick()
- {
- var result=document.getElementByIdx_x('result');
- result.innerHTML=result.innerHTML+"dobule click<br>";
- reset();
- }
- function tt2()
- {
- if(flag==1)
- {
- singleClick();
- }
- else
- {
- dobuleClick();
- }
- }
- </script>
- </head>
- <body>
- <input type="button" ondblclick="clickTest();" onclick="clickTest();" value="click test" />
- <div id="result"></div>
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛