Situation 1
If you bind both click and double-click events on a DOM object, when a double-click event occurs on this DOM object, the first click will trigger a click event, the second click will also trigger a double-click event, or a click event will trigger (IE7 and firefox).
Solution:
<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>
explain:
The first click records the time of the click and set the timeout of the click event (250ms is more appropriate). When clicking the second click, determine the time of the click and the time interval of the last click. If it is less than the specified event interval (such as 250ms), it is judged as a double-click event and clear the set Timeout (avoiding the click event triggering).
The second type:
<title>Differentiate between click and double click-</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');
=+"click<br>";
reset();
}
function dobuleClick()
{
var result=document.getElementByIdx_x('result');
=+"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 ></div>
The quick solution to the conflict problem of js mouse click and double-click events above is all the content I share with you. I hope you can give you a reference and I hope you can support me more.