JS mouse click, double click, three hits, multi-hit event

I have two methods here, a low, one intermediate.

(I think there is a better way, but I didn't want to come out)

If used

<div ondblclick="f2()" onclick="f1()"></div>

So double-click, after executing f1 (), then execute F2 ();
And we double-click must only want to implement F2 (); all we have to think other ways.
There is no problem with the following methods implement clicks, but when you want to hit, you need to pay attention to the speed of click.
~~In fact, many hits seem to be useless. . .~~

First, low level method

The idea is like this: Every time you click, COUNT will +1; when you click, the timer is turned on, and the count is a few times after the end of the time.
Notice: Click and double-click No problem, but if you want to hit, you must set it long enough, and you need to double-click to operate (such as: 5 hitting two times, and click, this three operations between two two Have a certain time interval)
Why is it a low-level method?: Because if you want to implement multi-hit, it will set it very long, this time if I just want to click, it will wait for a long time to respond.

<!DOCTYPE html>
<html>
<head>
    <title>JS mouse multi-hit</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        var count = 0;
        function myclick(){
            count = count + 1;
            if(count==1){
                window.setTimeout(function(){
                    / * Judgment COUNT * /
                    alert("mouse"+count+"hit");
                    /* */
                    count = 0;
                },1000);
            }
        }
    </script>
</head>
<body>
    <div onclick="myclick()" style="width:200px;height:200px;background-color:#22ccff;">Point this square</div>
</body>
</html>

Second, intermediate method

The idea is like this: Slightly modified on the basis of a low-level method. Every time you click, COUNT will +1, and the timer will be reset each time it is reset. This will wait for another click within the waiting time. In this way, whether it is a clicked or 100 hits, the time waiting for the time is the same.
Notice: To achieve a three hits or higher, click speed can't be too fast.

<!DOCTYPE html>
<html>
<head>
    <title>JS mouse multi-hit</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        var count = 0;
        var clickTimer = null;
        function myclick(){
            count = count + 1;
            clearTimeout(clickTimer);
            clickTimer = window.setTimeout(function(){
                / * Judgment COUNT * /
                alert("mouse"+count+"hit");
                /* */
                count = 0;
                clickTimer = null;
            },400);
        }
    </script>
</head>
<body>
    <div onclick="myclick()" style="width:200px;height:200px;background-color:#22ccff;">Point this square</div>
</body>
</html>

Intelligent Recommendation

Double-click the event mask js click event

Function in the click event bound on the timer, using a timer delay to remove double-click on the click event of impact, if it is clear the timer inside the double-click event, double-click event, and...

JS implementation Click event and double-click event

The code can solve the problem of clicking event and double-click event conflict // Click Event ——————————————&mdash...

Mouse click and double click events in js

In HTML, onclick is a click event, ondblclick is a double-click event Define the method in js, note that the timer is used here to distinguish between click and double-click events...

Three Responds to the mouse click event

Three Responds to the mouse click event prompt: I am now using the Vue 2.0 project to use Three Exhausted I have to know three kinds of coordinates first. Screen coordinate: We are open when we open o...

Right mouse click event in js

...