js judges mouse click or double click events

Click event refers to a click event of the mouse, which goes through the process of onmousedown, onmouseup and onclick; double click event refers to the process of two consecutive clicks of the mouse in the same place, which goes through onmousedown,onmouseup,onclick, onmousedown,onmouseup,onclick, ondblclick.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <input type="button" onclick="test1()" ondblclick="test2()" value="click">
    <script type="text/javascript">
       function test1 () {
        console.log('Single click');
       }
       function test2 () {
        console.log('double-click');
       }
    </script>
</body>
</html>

Click:

Double-click occurs:

So if you want to deal with clicks and double-clicks separately, here I have learned about three examples on the Internet, share them and sort them out by the way:

Method 1:

<!DOCTYPE html>
<html>
<head>
    <title>Judgement Click or double-click</title>
    <meta charset="utf-8">
</head>
<body>
    <input type="button" onclick="test()" ondblclick="test()" value="click">
    <div  id="mxh"> </div>
    <script type="text/javascript">
      function  test() { 
         if(event.type == "dblclick")     
            document.all.mxh.innerText = "You double-clicked me";
         if(event.type == "click")   
            document.all.mxh.innerText = "You clicked on me";
      } 
    </script>
</body>
</html>

This is a silly way to determine whether to click or double-click by the type of event, then save the result in a div, and then take the value in the div to determine which type it is.

Method two:

<!DOCTYPE html>
<html>
<head>
    <title>Judgement Click or double-click</title>
    <meta charset="utf-8">
</head>
<body>
  <input type="button" onclick="aa()" ondblclick="bb()" value="Point me">
  <script type="text/javascript">
     var timer = null; 
     function aa() {
        clearTimeout(timer); 
        if (event.detail == 2)
            return ;  
        timer = setTimeout(function() { 
          console.log('Single click');
        }, 300); 
    } 
    function bb() { 
        clearTimeout(timer);
        console.log('double-click');
    }
  </script>
</body>
</html>

Explain it separately.

Click: The user clicks on the trigger aa function to clear the timer. If it means that if the same method is executed twice in the same place, that is, double-click to exit the function, click why not trigger if. Given the timer assignment, the output click is executed after 300 ms. If clicked, other events will not be triggered in 300 ms, so click to explain.
Double-click: The user double-clicks to trigger two clicks and one dbclick. The first time, the aa function is executed, because this is the first time, so it will not return. The aa function is triggered again before the output of the two words is clicked between 300 ms. The number of times is counted as two times. The return function is triggered, then the bb function is triggered, and the output double-clicked two words.

Method three:

<!DOCTYPE html>
<html>
<head>
    <title>Judgement Click or double-click</title>
    <meta charset="utf-8">
</head>
<body>
  <input type="button" onclick="aa()" ondblclick="bb()" value="Point me">
  <script type="text/javascript">
      var isdb;  
      function aa(){  
        isdb=false;  
        window.setTimeout(cc, 500);
        function cc(){  
            if(isdb)
                return;  
            alert("Single click")  
        }  
      }  
    function bb(){  
        isdb=true;  
        alert("double-click")  
    }  
  </script>
</body>
</html>

Firstly, a judgment variable is set and three functions aa, bb and cc are defined.
Click: Enter the aa function, set the judgment variable to false, set a timer, trigger the cc function after 500 ms, because it is clicked so there is no redundant operation, and then smoothly enter the cc function. If the judgment variable is true, enter the bb function is to perform the dbclick step, so return, but here directly skip over to perform the output click operation.
Double-click: enter the aa function, assign the judgement variable to false, set the timer, and enter the aa function within 500 ms, but never execute the cc function. Then the bb function is executed, the judgement variable is set to true value, and double-click is popped up. Then the cc function begins to enter, because the judgement variable is true value, so it will return twice.

Posted by ganesan on Tue, 02 Apr 2019 23:54:30 -0700

Programmer Group