Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts

    onclick and ondblclick on same element

    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:

    Code:
    <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.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.

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

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts
    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...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts
    This works cross_browser:

    Code:
    <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...
    Last edited by chump2877; 02-23-2007 at 01:08 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.
    Code:
    <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.

  • #6
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    greetings

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •