简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

js鼠标单击和双击事件冲突问题的快速解决方法

来源:易贤网   阅读:1089 次  日期:2016-07-28 15:58:15

温馨提示:易贤网小编为您整理了“js鼠标单击和双击事件冲突问题的快速解决方法”,方便广大网友查阅!

下面小编就为大家带来一篇js鼠标单击和双击事件冲突问题的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。

情况一

如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox)。

解决方法:

<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(避免触发单击事件)。

第二种:

<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> 

以上这篇js鼠标单击和双击事件冲突问题的快速解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:深入浅析JavaScript中的scrollTop
下一篇:js 弹出对话框(遮罩)透明,可拖动的简单实例
易贤网手机网站地址:js鼠标单击和双击事件冲突问题的快速解决方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!