...

View Full Version : onclick and ondblclick on same element



chump2877
02-22-2007, 10:44 PM
I'm trying to distinguish between an onclick event and an ondblclick event on the same HTML element...since the onclick event always fires first before the ondblclick event can fire, I'm trying to create a workaround as follows:



<div id="myDiv" style="width:300px;height:300px;background-color:#000;cursor:pointer">.</div>

<div id="display" style="border:1px solid #000;width:288px; height:25px;padding:5px;margin:15px 0 0 0"></div>

<script type="text/javascript">

var divObj = document.getElementById('myDiv');
var dispObj = document.getElementById('display');
var lastClickTime = 0;

divObj.onclick = function()
{
var d = new Date();
if (lastClickTime == 0)
{
lastClickTime = parseInt(d.getTime());
}
else
{
var t = parseInt(d.getTime());
if (t - lastClickTime < 1000)
{
dispObj.innerHTML = 'ondblclick';
lastClickTime = t;
return;
}
}

dispObj.innerHTML = 'onclick';

alert(t+" "+lastClickTime);
};

</script>

The problem I'm having here is that alert(lastClickTime); is always evaluating to be the same number, and thus the "ondblclick" code is never executed beyond the first second of the first divObj.onclick event firing...

Thanks for any help.

glenngv
02-22-2007, 11:20 PM
Try using getMilliseconds() instead of getTime() and change 1000 delay to something appropriate. But I think that would still not be 100% accurate. I think the more accurate solution would be to delay the click function a bit by using setTimeout and in the dblclick function, cancel the setTimeout.


<html>
<head>
<script type="text/javascript">

var timer;
function doClick(){
timer = setTimeout("alert('click')", 200);
}

function doDblClick(){
clearTimeout(timer);
alert('dbl click');
}
</script>
</head>
<body>
<div onclick="doClick()" ondblclick="doDblClick()">Click or double-click me!</div>
</body>
</html>

chump2877
02-23-2007, 01:45 AM
That solution appears to work in IE, but not in FF...

I read somewhere once that the onclick event actually fires twice in FF and once in IE, or vice versa....or some nonsense like that....which would account for the current problem with your code...

chump2877
02-23-2007, 01:55 AM
This works cross_browser:



<div id="myDiv" style="width:300px;height:300px;background-color:#000;cursor:pointer"><br /></div>

<div id="display" style="border:1px solid #000;width:288px;height:25px;padding:5px;margin:15px 0 0 0"></div>

<script type="text/javascript">

var divObj = document.getElementById('myDiv');
var dispObj = document.getElementById('display');
var x = 0;

divObj.onclick = function()
{
x++;
if (x <= 1)
timer = setTimeout("dispObj.innerHTML = 'onclick'", 200);
else
x = 0;
};

divObj.ondblclick = function()
{
clearTimeout(timer);
dispObj.innerHTML = 'ondblclick';
x = 0;
}

</script>Thanks for your help...:)

glenngv
02-23-2007, 10:09 PM
If you click twice slowly (not double-click), the second click will not be detected as onclick event. You need to reset the x counter after the first onclick.

<script type="text/javascript">

var divObj = document.getElementById('myDiv');
var dispObj = document.getElementById('display');
var x = 0;

divObj.onclick = function()
{
x++;
if (x <= 1)
timer = setTimeout("dispObj.innerHTML += 'onclick'; x=0;", 300);
else
x = 0;
};

divObj.ondblclick = function()
{
clearTimeout(timer);
dispObj.innerHTML += 'ondblclick';
x = 0;
}
</script>
Also, I increased the delay from 200 to 300 to make room for the default double-click speed setting in the Mouse Properties in Control Panel. This will at least minimize the onclick to be fired on ondblclick. If you use 200, the onclick still fires if you double-click slowly within the set speed. Of course, this code will not work perfectly all the time if speed is set to a very Slow setting. This is usually set for inexperienced mouse users. If we could only programmatically determine the speed setting then there would be a perfect solution to this.

darac
08-09-2010, 03:34 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script type="text/javascript" src="./extern/scripts/prototype-1.6.1.js"></script>

<script type="text/javascript">
function single(elem){
console.log("single > "+elem);
}
function double(elem){
console.log("double > "+elem);
}
function triple(elem){
console.log("tripple > "+elem);
}
function cripple(elem){
console.log("cripple > "+elem);
}
function seperator(){
console.log("--------------------------------");
}

/**
* @author OstrickiDa
*
* This is a workaround for different behaviour on IE and FF cencerning event handling
* when onlick & ondblclick events are used on an element at the same time.
* This class has two different modes dependent on the boolean constructor parameter 'fireFirstClick'.
*
* Variant 1 (fireFirstClick=true)
* click -> fires 1x click event immediately
* doubleclick -> fires 1x click event immediately on the first click + 1x doubleclick event immediately at the second (IE standard behaviour)
*
* Variant 2 (fireFirstClick=false)
* click -> fires 1x click event DELAYED (about 600ms)
* doubleclick -> fires NO click event + 1x doubleclick event immmediately on the second click
* (that means a strict seperation - a click is a click and a doubleclick is a doubleclick only)
* The mechanism here uses a delay on click events and assures that the click event is only fired once.
* If the double click event is triggered - no additional click events will have been fired.
*
* Note: This script relies on prototype /extern/scripts/prototype-1.6.1.js
* example of usage:
* var dcd = new DoubleClickDispatcher(true);
* ...
* <input type="checkbox"
* onclick="if(dcd.delay(event))return false;doSingleClick();doSingleClick();"
* ondblclick="if(dcd.delay(event))return false;doDoubleClick();doDoubleClick();">
*/
var DoubleClickDispatcher = Class.create();
DoubleClickDispatcher.prototype = {

/*********************************************
* setting up click dispatcher
*/
initialize: function(fireFirstClick) {
if(fireFirstClick!=undefined){
this.fireFirstClick=fireFirstClick;
}else{
this.fireFirstClick=true;
}
this.timers = new Hash();
this.clickPass = new Hash();
this.initialized=true;
},

/*********************************************
* Delays click events for about 0,6 seconds - if a second click is performed
* during this periode, the click event will not be executed at all -> only the
* ondblclick event will be executed.
* returns true if the further functions of the element.onclick/element.ondblclick shell
* be executed or false to prevent the execution.
*/
delay: function(event) {
var elem = Element.extend((event.target) ? event.target : event.srcElement);
var dispatcher=this;

if(event.type=="click"){
if(!dispatcher.clickPass.get(elem)){
if(!dispatcher.timers.get(elem)){
//somehow pass the elem
var timer=setTimeout(function(){
dispatcher.timers.set(elem,undefined);
if(!dispatcher.fireFirstClick){
dispatcher.clickPass.set(elem,true);
elem.click();
}
},600);
dispatcher.timers.set(elem,timer);
//stop this event -> will be executed after delay
return dispatcher.fireFirstClick?false:true;
}else{
//stop this event -> double click will be fired
return true;
}
}else{
//click was delayed and now it's really executed
dispatcher.clickPass.set(elem,false);
return false;
}
}
if(event.type=="dblclick"){
if(dispatcher.timers.get(elem)){
clearTimeout(dispatcher.timers.get(elem));
dispatcher.timers.set(elem,undefined);
}
if(dispatcher.clickPass.get(elem)){
dispatcher.clickPass.set(elem,false);
}
// go on with event - evaluate doubleclick
return false;
}
return false;
},
};

var dcd = new DoubleClickDispatcher(true);


</script>
</head>
<body>
<b>Mit delay handler</b><br>
<input type="checkbox" onclick ="if(dcd.delay(event))return false;single(this);"
ondblclick ="if(dcd.delay(event))return false;double(this);">single/double<br>

<input type="checkbox" onclick ="if(dcd.delay(event))return false;triple(this);"
ondblclick ="if(dcd.delay(event))return false;cripple(this);">triple/cripple<br>

<input type="checkbox" onclick ="if(dcd.delay(event))return false;single(this);double(this);"
ondblclick ="if(dcd.delay(event))return false;triple(this);cripple(this);">single,double/triple,cripple<br>

<p></p>

<b>Ohne delay handler</b><br>
<input type="checkbox" onclick ="single(this);"
ondblclick ="double(this);">single/double<br>

<input type="checkbox" onclick ="single(this);double(this);"
ondblclick ="triple(this);cripple(this);">single,double/triple,cripple<br>

<input type="button" value="seperator" onclick="seperator();" >

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum