복붙노트

[JQUERY] JQuery와는 별도로 두 번 클릭하고 클릭 한 번 바인딩

JQUERY

JQuery와는 별도로 두 번 클릭하고 클릭 한 번 바인딩

해결법

  1. 1.나는 존 Strickler의 대답은 매우 내가 기대 한 일을하지 않은 것으로 나타났다. 경고가 두 번째 창 내에서 두 번째 클릭에 의해 트리거되면, 이후의 모든 클릭 트리거 또 다른 경고가 다시 클릭하기 전에 2 초 때까지 기다립니다. 그래서 요한의 코드를, 트리플 클릭하면, 그것은 한 번의 클릭 다음 두 번 클릭과 같은 역할을 기대하는 두 개의 더블 클릭 역할을합니다.

    나는 존 Strickler의 대답은 매우 내가 기대 한 일을하지 않은 것으로 나타났다. 경고가 두 번째 창 내에서 두 번째 클릭에 의해 트리거되면, 이후의 모든 클릭 트리거 또 다른 경고가 다시 클릭하기 전에 2 초 때까지 기다립니다. 그래서 요한의 코드를, 트리플 클릭하면, 그것은 한 번의 클릭 다음 두 번 클릭과 같은 역할을 기대하는 두 개의 더블 클릭 역할을합니다.

    나는 기능에 대한 자신의 솔루션을 이런 식으로 내 마음을 더 잘 이해할 수있는 방법으로 흐름을 재 작업했다. 나는 보통 감도로 느낄 것입니다 무슨 더 나은 시뮬레이션 (700) 2000에서 지연을 아래로 떨어졌다. 여기에 바이올린는 다음과 같습니다 http://jsfiddle.net/KpCwN/4/.

    기초, 존 주셔서 감사합니다. 나는이 대체 버전이 다른 사람에게 유용 바랍니다.

    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
    });

});

  2. 2."NOTT는 응답"에서 주어진 솔루션은 모두 이벤트를 발생 클릭하고로 DoubleClicked 때 dblclick 것으로 보인다. 그러나 나는 그것이 올바른 방향을 가리키는 생각합니다.

    "NOTT는 응답"에서 주어진 솔루션은 모두 이벤트를 발생 클릭하고로 DoubleClicked 때 dblclick 것으로 보인다. 그러나 나는 그것이 올바른 방향을 가리키는 생각합니다.

    나는 작은 변화를했다,이 결과입니다 :

    $("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        $this.removeClass('clicked'); 
        alert("Double click");
        //here is your code for double click
    }else{
        $this.addClass('clicked');
        setTimeout(function() { 
            if ($this.hasClass('clicked')){
                $this.removeClass('clicked'); 
                alert("Just one click!");
                //your code for single click              
            }
        }, 500);          
    }
});

    시도 해봐

    http://jsfiddle.net/calterras/xmmo3esg/

  3. 3.물론, 바인딩이 핸들러는 하나를 클릭하고 다른 dblclick 할 수 있습니다. 변수 모든 클릭에 단위를 만듭니다. 다음 일련의 지연 후 리셋한다. 의 setTimeout 함수 내부 당신이 뭔가를 할 수 ...

    물론, 바인딩이 핸들러는 하나를 클릭하고 다른 dblclick 할 수 있습니다. 변수 모든 클릭에 단위를 만듭니다. 다음 일련의 지연 후 리셋한다. 의 setTimeout 함수 내부 당신이 뭔가를 할 수 ...

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

$('a').bind({
    click: function(e) {
        clearTimeout(timer);

        timer = setTimeout(function() {
            clicks = 0;
        }, DELAY);

        if(clicks === 1) {
            alert(clicks);
             //do something here

            clicks = 0;
        }

        //Increment clicks
        clicks++;
    },
    dblclick: function(e) {
        e.preventDefault(); //don't do anything
    }
});

  4. 4.당신은 아마 별도의 클릭을 기다리는 가지고 클릭 / dblclick의 사용자 정의 구현을 작성할 수 있습니다. 나는 당신이 이것을 달성 도움이 될 핵심 jQuery를 기능에 아무 것도 표시되지 않습니다.

    당신은 아마 별도의 클릭을 기다리는 가지고 클릭 / dblclick의 사용자 정의 구현을 작성할 수 있습니다. 나는 당신이 이것을 달성 도움이 될 핵심 jQuery를 기능에 아무 것도 표시되지 않습니다.

    JQuery와 사이트에서 .dblclick ()에서 인용

    그것은 클릭과 같은 요소의 dblclick 이벤트 모두에 바인드 처리기에 권할 수있다. 이벤트의 순서는 어떤 두 개의 클릭 dblclick 전에 이벤트와 다른 하나를 수신하여, 브라우저에 브라우저에 따라 다릅니다 트리거. 두 번 클릭 감도 (더블 클릭으로 감지 클릭 사이의 최대 시간) 운영 체제 및 브라우저에 따라 다릅니다, 종종 사용자가 구성 할 수 있습니다.

  5. 5.다음 코드를보고

    다음 코드를보고

    $("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        alert("Double click");
        //here is your code for double click
        return;
    }else{
         $this.addClass('clicked');
        //your code for single click
         setTimeout(function() { 
                 $this.removeClass('clicked'); },500);
    }//end of else
});

    데모는 여기 http://jsfiddle.net/cB484/ 간다

  6. 6.내가 작성한 JQuery와 플러그인 클릭하고 dblclick 이벤트를 위임 할 수도 있도록 그

    내가 작성한 JQuery와 플러그인 클릭하고 dblclick 이벤트를 위임 할 수도 있도록 그

    // jQuery plugin to bind both single and double click to objects
// parameter 'delegateSelector' is optional and allow to delegate the events
// parameter 'dblclickWait' is optional default is 300
(function($) {
$.fn.multipleClicks = function(delegateSelector, clickFun, dblclickFun, dblclickWait) {
    var obj;
    if (typeof(delegateSelector)==='function' && typeof(clickFun)==='function') {
        dblclickWait = dblclickFun; dblclickFun = clickFun; clickFun = delegateSelector; delegateSelector = null; // If 'delegateSelector' is missing reorder arguments
    } else if (!(typeof(delegateSelector)==='string' && typeof(clickFun)==='function' && typeof(dblclickFun)==='function')) {
        return false;
    }
    return $(this).each(function() {
        $(this).on('click', delegateSelector, function(event) {
            var self = this;
            clicks = ($(self).data('clicks') || 0)+1;
            $(self).data('clicks', clicks);
            if (clicks == 1) {
                setTimeout(function(){
                    if ($(self).data('clicks') == 1) {
                        clickFun.call(self, event); // Single click action
                    } else {
                        dblclickFun.call(self, event); // Double click action
                    }
                    $(self).data('clicks', 0);
                }, dblclickWait || 300);
            }
        });
    });
};
})(jQuery);

  7. 7.

    var singleClickTimer = 0; //define a var to hold timer event in parent scope
jqueryElem.click(function(e){ //using jquery click handler
    if (e.detail == 1) { //ensure this is the first click
        singleClickTimer = setTimeout(function(){ //create a timer
            alert('single'); //run your single click code
        },250); //250 or 1/4th second is about right
    }
});

jqueryElem.dblclick(function(e){ //using jquery dblclick handler
    clearTimeout(singleClickTimer); //cancel the single click
    alert('double'); //run your double click code
});

  8. 8.난이 간단한 솔루션을 구현하고, http://jsfiddle.net/533135/VHkLR/5/ HTML 코드

    난이 간단한 솔루션을 구현하고, http://jsfiddle.net/533135/VHkLR/5/ HTML 코드

    <p>Click on this paragraph.</p>
<b> </b>

    스크립트 코드

    var dbclick=false;    
$("p").click(function(){
setTimeout(function(){
if(dbclick ==false){
$("b").html("clicked")
}

},200)

}).dblclick(function(){
dbclick = true
$("b").html("dbclicked")
setTimeout(function(){
dbclick = false


},300)
});

    그별로 랙이

  9. 9.이 솔루션은 나를 위해 작동

    이 솔루션은 나를 위해 작동

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

$(".fc-event").click(function(e) {
    if (timer == null) {
        timer = setTimeout(function() {
           clicks = 0;
            timer = null;
            // single click code
        }, DELAY);
    }

    if(clicks === 1) {
         clearTimeout(timer);
         timer = null;
         clicks = -1;
         // double click code
    }
    clicks++;
});

  10. 10.난 아직도 잘 작동 여기에 위의 답변을 일부 변경했다 : http://jsfiddle.net/arondraper/R8cDR/

    난 아직도 잘 작동 여기에 위의 답변을 일부 변경했다 : http://jsfiddle.net/arondraper/R8cDR/

  11. 11.

    (function($){

$.click2 = function (elm, o){
    this.ao = o;
    var DELAY = 700, clicks = 0;
    var timer = null;
    var self = this;

    $(elm).on('click', function(e){
        clicks++;
        if(clicks === 1){
            timer = setTimeout(function(){
                self.ao.click(e);
            }, DELAY);
        } else {
            clearTimeout(timer);
            self.ao.dblclick(e);
        }
    }).on('dblclick', function(e){
        e.preventDefault();
    });

};

$.click2.defaults = { click: function(e){}, dblclick: function(e){} };

$.fn.click2 = function(o){
    o = $.extend({},$.click2.defaults, o);
    this.each(function(){ new $.click2(this, o); });
    return this;
};

})(jQuery);

    그리고 마지막으로 우리는 사용합니다.

    $("a").click2({
    click : function(e){
        var cid = $(this).data('cid');
        console.log("Click : "+cid);
    },
    dblclick : function(e){
        var cid = $(this).data('cid');
        console.log("Double Click : "+cid);
    }
});

  12. 12.위의 답변으로 동일하지만 트리플 클릭 수 있습니다. (지연 500) http://jsfiddle.net/luenwarneke/rV78Y/1/

    위의 답변으로 동일하지만 트리플 클릭 수 있습니다. (지연 500) http://jsfiddle.net/luenwarneke/rV78Y/1/

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

$(document).ready(function() {
    $("a")
    .on("click", function(e){
        clicks++;  //count clicks
        timer = setTimeout(function() {
        if(clicks === 1) {
           alert('Single Click'); //perform single-click action
        } else if(clicks === 2) {
           alert('Double Click'); //perform single-click action
        } else if(clicks >= 3) {
           alert('Triple Click'); //perform Triple-click action
        }
         clearTimeout(timer);
         clicks = 0;  //after action performed, reset counter
       }, DELAY);
    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });
});

  13. 13.이것은 당신이 나를 위해 작품이다 기본적인 자바 스크립트를 사용 할 수있는 방법입니다 :

    이것은 당신이 나를 위해 작품이다 기본적인 자바 스크립트를 사용 할 수있는 방법입니다 :

    var v_Result;
function OneClick() {
    v_Result = false;
    window.setTimeout(OneClick_Nei, 500)
    function OneClick_Nei() {
        if (v_Result != false) return;
        alert("single click");
    }
}
function TwoClick() {
    v_Result = true;
    alert("double click");
}

  14. 14.다음은이 문제에 대한 나의 간단한 방법이다.

    다음은이 문제에 대한 나의 간단한 방법이다.

    JQuery와 기능 :

    jQuery.fn.trackClicks = function () {
    if ($(this).attr("data-clicks") === undefined) $(this).attr("data-clicks", 0);

    var timer;
    $(this).click(function () {
        $(this).attr("data-clicks", parseInt($(this).attr("data-clicks")) + 1);

        if (timer) clearTimeout(timer);

        var item = $(this);
        timer = setTimeout(function() {
            item.attr("data-clicks", 0);
        }, 1000);
    });
}

    이행:

    $(function () {
    $("a").trackClicks();

    $("a").click(function () {
        if ($(this).attr("data-clicks") === "2") {
            // Double clicked
        }
    });
});

    데이터 클릭가 가서 클릭으로 아래로, 소송에 시간 (1000)을 조정 볼 수있는 파이어 폭스 / 크롬에서 클릭 된 요소를 검사합니다.

    15. from https://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] JQuery와 아약스 요청의 진행을 얻을 수있는 가장 깨끗한 방법은 무엇입니까?  (0) 2020.10.14
[JQUERY] 형식 오류 : $ 아약스 (...)는 함수가 아닙니다?  (0) 2020.10.14
[JQUERY] 어떻게 JQuery와 콜백 양식 제출 후를 할까?  (0) 2020.10.14
[JQUERY] 키 / 값 자바 스크립트 객체의 키를 얻을 수있는 가장 좋은 방법  (0) 2020.10.14
[JQUERY] JQuery와 비활성화 형태에 제출 입력  (0) 2020.10.14
,

티스토리툴바