single click , double click 구분하기

두 가지 방식이 있다.

class 를 추가하는 방식, 타임아웃을 걸어주는 방식이 있는데, multi handle 의 경우 class 를 추가하는 방식이 좀 더 편하다.

    var DELAY = 700, clicks = 0, timer = null;

        $(function () {

            $("button")
                .on("dblclick", function (e) {
                    e.preventDefault();  //cancel system double-click event
                });

        });


        window.onload = () => {
            const all_btns = document.querySelectorAll('button');
            for (var i = 0; i < all_btns.length; i++) {
                all_btns[i].addEventListener('click', function (e) {
                    speech(e["srcElement"])
                    console.log(e)
                });
            }


        }


        function clickHandle(obj, place) {
            var $this = $(obj);
            if ($this.hasClass('clicked')) {
                goto(place)
                //here is your code for double click
                //  return;a
            } else {
                $this.addClass('clicked');
                speech(obj)
                //your code for single click
                setTimeout(function () {
                    $this.removeClass('clicked');
                }, 500);
            }//end of else
        }

        function speech(obj) {
//one click
            var is = true;
            var iTimeout = 500; //500/1000 초 이 값을 조절하면 더블클릭까지 기다릴 시간을 조정할 수 있음
            eval("obj._fnOnClick = function () { return(click_event(obj)) }");
            obj._timeoutid = window.setTimeout(obj._fnOnClick, iTimeout, "JavaScript");


            var utterThis = new SpeechSynthesisUtterance(obj.innerText);
            var synth = window.speechSynthesis;
            synth.speak(utterThis);
            console.log("work")
            return is;
        }

        function goto(place) {
            return location.href = place;
        }

 

 

 

타임아웃을 걸어줘야한다.

var DELAY = 700, clicks = 0, timer = null;

$(function(){

    $("a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter

            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });

});

stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately/7845282#7845282

 

developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail