어떻게 단 한번의 클릭 이벤트를 두 번 클릭 이벤트를 차별화?

해결법

1.당신은 첫 번째 클릭 후 다른 클릭이 있는지 확인하기 위해 제한 시간을 사용해야합니다.

당신은 첫 번째 클릭 후 다른 클릭이 있는지 확인하기 위해 제한 시간을 사용해야합니다.

여기에 트릭은 다음과 같습니다

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

용법:

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})

<button>Click Me!</button>

편집하다:

아래에 언급 한 바와 같이, 기본 dblclick 이벤트를 사용하여 선호 : http://www.quirksmode.org/dom/events/click.html

또는 jQuery를에 의해 제공되는 하나 http://api.jquery.com/dblclick/

2.dblclick 이벤트의 동작은 쿼크 모드에 설명되어 있습니다.

dblclick 이벤트의 동작은 쿼크 모드에 설명되어 있습니다.

dblclick에 대한 이벤트의 순서는 다음과 같습니다

이 규칙의 한 가지 예외는 자신의 사용자 정의 순서에 인터넷 익스플로러 (물론)입니다 :

당신이 볼 수 있듯이, 동일한 요소에 함께 두 이벤트를 듣고 당신의 클릭 핸들러에 추가 통화가 발생합니다.
3.대신이 이벤트 객체에서 액세스 할 수있는 네이티브라는 속성 세부가에서 더 많은 임시 주와의 setTimeout, 회전을 활용!

대신이 이벤트 객체에서 액세스 할 수있는 네이티브라는 속성 세부가에서 더 많은 임시 주와의 setTimeout, 회전을 활용!
```
element.onclick = event => {
   if (event.detail === 1) {
     // it was a single click
   } else if (event.detail === 2) {
     // it was a double click
   }
};
```
현대 브라우저와도 IE-9 지원을 :)

출처 : https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

4.간단한 기능. 어떤 JQuery와 또는 다른 프레임 워크가 필요하지 않습니다. 당신의 기능을 매개 변수로 전달

간단한 기능. 어떤 JQuery와 또는 다른 프레임 워크가 필요하지 않습니다. 당신의 기능을 매개 변수로 전달

<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
    <script>
        function doubleclick(el, onsingle, ondouble) {
            if (el.getAttribute("data-dblclick") == null) {
                el.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (el.getAttribute("data-dblclick") == 1) {
                        onsingle();
                    }
                    el.removeAttribute("data-dblclick");
                }, 300);
            } else {
                el.removeAttribute("data-dblclick");
                ondouble();
            }
        }
    </script>

5.나는 행동이 따라 브라우저 것을 두려워 :

나는 행동이 따라 브라우저 것을 두려워 :

http://api.jquery.com/dblclick/

Firefox에서 코드를 실행, 두 번 클릭에서 클릭 () 핸들러 방지 당신의 경고 (). 당신은 그런 경고를 제거하는 경우 두 이벤트 모두를 얻을.
6.그럼 더블 클릭하려면 먼저 한 번 클릭해야합니다 (두 번 클릭). 경고가 팝업 때문에 클릭 () 핸들러 화재는 첫 번째 클릭에, 그리고, 당신은 dblclick () 핸들러를 발사 할 수있는 두 번째 클릭을 할 수있는 기회가 없습니다.

그럼 더블 클릭하려면 먼저 한 번 클릭해야합니다 (두 번 클릭). 경고가 팝업 때문에 클릭 () 핸들러 화재는 첫 번째 클릭에, 그리고, 당신은 dblclick () 핸들러를 발사 할 수있는 두 번째 클릭을 할 수있는 기회가 없습니다.

() 경고가 아닌 다른 뭔가를 당신의 핸들러를 변경하면 동작을 볼 수 있습니다. (아마도 요소의 배경색을 변경)
```
$("#my_id").click(function() { 
    $(this).css('backgroundColor', 'red')
});

$("#my_id").dblclick(function() {
    $(this).css('backgroundColor', 'green')
});
```

7.이 답변 시간을 통해 쓸모 만들어 체크 @ KYW의 솔루션을.

이 답변 시간을 통해 쓸모 만들어 체크 @ KYW의 솔루션을.

나는 @AdrienSchuler에 의해 게시 취지에서 영감 솔루션을 만들었습니다. 한 번의 클릭과 요소에 더블 클릭을 바인딩 할 경우에만이 솔루션을 사용합니다. 그렇지 않으면 나는 기본을 클릭하고 dblclick 청취자를 사용하는 것이 좋습니다.

이러한 차이점은 다음과 같습니다

자바 스크립트 :

function makeDoubleClick(doubleClickCallback, singleClickCallback) {
    var clicks = 0, timeout;
    return function() {
        clicks++;
        if (clicks == 1) {
            singleClickCallback && singleClickCallback.apply(this, arguments);
            timeout = setTimeout(function() { clicks = 0; }, 400);
        } else {
            timeout && clearTimeout(timeout);
            doubleClickCallback && doubleClickCallback.apply(this, arguments);
            clicks = 0;
        }
    };
}

용법:

var singleClick = function(){ console.log('single click') };
var doubleClick = function(){ console.log('double click') };
element.addEventListener('click', makeDoubleClick(doubleClick, singleClick));

다음은 jsfiddle의 사용법은, JQuery와 버튼은 허용 대답의 동작입니다.

8.A1rPun의 답변에 따라 또 다른 간단한 바닐라 솔루션 (JQuery와 솔루션에 대한 자신의 바이올린을보고, 모두가이 일에).

A1rPun의 답변에 따라 또 다른 간단한 바닐라 솔루션 (JQuery와 솔루션에 대한 자신의 바이올린을보고, 모두가이 일에).

더블 클릭은 단일 클릭 핸들러가 반드시 지연 후 트리거 될 때 즉, 단일 클릭 핸들러를 트리거하지 보인다 ...

var single = function(e){console.log('single')},
    double = function(e){console.log('double')};

var makeDoubleClick = function(e) {

  var clicks = 0,
      timeout;

  return function (e) {

    clicks++;

    if (clicks == 1) {
      timeout = setTimeout(function () {
        single(e);
        clicks = 0;
      }, 250);
    } else {
      clearTimeout(timeout);
      double(e);
      clicks = 0;
    }
  };
}
document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);

9.다음은 이벤트의 임의의 수에 대한 jeum의 다른 코드는 다음과 같습니다

다음은 이벤트의 임의의 수에 대한 jeum의 다른 코드는 다음과 같습니다

 var multiClickHandler = function (handlers, delay) {
    var clicks = 0, timeout, delay = delay || 250;
    return function (e) {
      clicks++;
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        if(handlers[clicks]) handlers[clicks](e);
        clicks = 0;
      }, delay);
    };
  }

  cy.on('click', 'node', multiClickHandler({
    1: function(e){console.log('single clicked ', e.cyTarget.id())},
    2: function(e){console.log('double clicked ', e.cyTarget.id())},
    3: function(e){console.log('triple clicked ', e.cyTarget.id())},
    4: function(e){console.log('quadro clicked ', e.cyTarget.id())},
    // ...
  }, 300));

cytoscape.js 응용 프로그램이 필요했습니다.

10.어떻게 하나의 동일한 요소에 하나의 클릭과 더블 클릭을 구별하는 방법?

어떻게 하나의 동일한 요소에 하나의 클릭과 더블 클릭을 구별하는 방법?

당신이 그들을 혼합 할 필요가없는 경우, 당신은 클릭하고 dblclick에 의존 할 수 있으며, 각각 잘 일을 할 것입니다.

를 혼합 할 때 문제가 발생한다 : 당신은 한 번의 클릭으로 더블 클릭의 "독립"한 번의 클릭, 또는 일부인지 여부를 결정해야합니다 있도록 dblclick 이벤트가 실제로뿐만 아니라 클릭 이벤트를 트리거합니다.

또한 : 당신은 클릭과 dblclick 하나와 같은 요소를 모두 사용하지 않아야합니다 :

이제 좋은 소식에 :

당신은 이벤트와 관련된 클릭 수를 감지하는 이벤트의 세부 속성을 사용할 수 있습니다. 이것은 매우 쉽게 감지하는 내부 클릭의 더블 클릭합니다.

문제는 더블 클릭의있는 거 부분을 하나의 클릭을 감지하고 있는지 여부 그들은 남아있다. 이를 위해, 우리는 다시 타이머와의 setTimeout을 사용하는 것입니다.

데이터 속성의 사용으로, 모두 함께 그것을 포장하는 것은 (전역 변수를 피하기 위해)와 클릭에게 자신을 계산 할 필요없이, 우리가 얻을 :
```
<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>

<div id="log" style="background: #efefef;"></div>
```
```
<script>
var clickTimeoutID;
$( document ).ready(function() {

    $( '.clickit' ).click( function( event ) {

        if ( event.originalEvent.detail === 1 ) {
            $( '#log' ).append( '(Event:) Single click event received.<br>' );

            /** Is this a true single click or it it a single click that's part of a double click?
             * The only way to find out is to wait it for either a specific amount of time or the `dblclick` event.
             **/
            clickTimeoutID = window.setTimeout(
                    function() {
                        $( '#log' ).append( 'USER BEHAVIOR: Single click detected.<br><br>' );
                    },
                    500 // how much time users have to perform the second click in a double click -- see accessibility note below.
                );

        } else if ( event.originalEvent.detail === 2 ) {
            $( '#log' ).append( '(Event:) Double click event received.<br>' );
            $( '#log' ).append( 'USER BEHAVIOR: Double click detected.<br>' );
            window.clearTimeout( clickTimeoutID ); // it's a dblclick, so cancel the single click behavior.
        } // triple, quadruple, etc. clicks are ignored.

    });

});
</script>
```
JSfiddle

그것은 만족 해결책을 찾기 위해 잠시했다, 난이 도움이되기를 바랍니다!
11.우수한 jQuery를 스파클 플러그인을 사용합니다. 플러그인은 당신에게 처음이자 마지막 클릭을 감지 할 수있는 옵션을 제공합니다. 당신은 다른 클릭이 첫 번째 클릭 다음 경우 감지하여 클릭하고 dblclick 구별하는 데 사용할 수 있습니다.

우수한 jQuery를 스파클 플러그인을 사용합니다. 플러그인은 당신에게 처음이자 마지막 클릭을 감지 할 수있는 옵션을 제공합니다. 당신은 다른 클릭이 첫 번째 클릭 다음 경우 감지하여 클릭하고 dblclick 구별하는 데 사용할 수 있습니다.

http://balupton.com/sandbox/jquery-sparkle/demo/ 그것을 확인
12.현대 정답은 허용 대답과 @kyw의 솔루션 사이의 혼합이다. 당신은 첫 번째 단 한번의 클릭과 두 번째 클릭을 방지하기 위해에서는 event.detail 체크를 방지하기 위해 제한 시간이 필요합니다.

현대 정답은 허용 대답과 @kyw의 솔루션 사이의 혼합이다. 당신은 첫 번째 단 한번의 클릭과 두 번째 클릭을 방지하기 위해에서는 event.detail 체크를 방지하기 위해 제한 시간이 필요합니다.

CONST = document.getElementById를 버튼 (버튼 ') 타이머하자 button.addEventListener가 ( '클릭'이벤트 => { 경우 (에서는 event.detail === 1) { 타이머의 setTimeout = (() => { 을 console.log ( '클릭') } 200) } }) button.addEventListener ( 'dblclick'이벤트 => { 사항 clearTimeout (타이머) 을 console.log ( 'dblclick') }) <버튼 ID = "버튼"> 나를 클릭
13.난 당신이 더블 클릭에서 singleclick을 차별화하기 위해 사용자 정의 'singleclick'이벤트를 사용할 수있는 간단한 jQuery를 플러그인을 썼다 :

난 당신이 더블 클릭에서 singleclick을 차별화하기 위해 사용자 정의 'singleclick'이벤트를 사용할 수있는 간단한 jQuery를 플러그인을 썼다 :

https://github.com/omriyariv/jquery-singleclick
```
$('#someDiv').on('singleclick', function(e) {
    // The event will be fired with a small delay.
    console.log('This is certainly a single-click');
}
```

14.피하기 JQuery와 (과 다른 90-140k libs와)에 같은 I, 및 지적 브라우저가 onclick을 먼저 처리로, 그래서 여기에 내가 (이 예는 또한 클릭 된 위치 지역의 x 및 y를 받고 커버) 내가 만든 웹 사이트에 무슨 짓을

피하기 JQuery와 (과 다른 90-140k libs와)에 같은 I, 및 지적 브라우저가 onclick을 먼저 처리로, 그래서 여기에 내가 (이 예는 또한 클릭 된 위치 지역의 x 및 y를 받고 커버) 내가 만든 웹 사이트에 무슨 짓을

clicksNow-0; //global js, owell

function notify2(e, right) {  // called from onclick= and oncontextmenu= (rc)
var x,y,xx,yy;
var ele = document.getElementById('wrap');  
    // offset fixed parent for local win x y
var xxx= ele.offsetLeft;
var yyy= ele.offsetTop;

//NScape
if (document.layers || document.getElementById&&!document.all) {
    xx= e.pageX;
    yy= e.pageY;
} else {
    xx= e.clientX;
    yy= e.clientY;
}
x=xx-xxx;
y=yy-yyy;

clicksNow++;
    // 200 (2/10ths a sec) is about a low as i seem to be able to go
setTimeout( "processClick( " + right + " , " + x + " , " + y + ")", 200);
}

function processClick(right, x, y) {
if (clicksNow==0) return; // already processed as dblclick
if (clicksNow==2) alert('dbl');
clicksNow=0;
    ... handle, etc ...
}

희망이 도움이

15.아드 슐러을 바탕으로 (정말 감사합니다!) 대답은, Datatables.net에 대한 많은 용도, 여기에 수정이다 :

아드 슐러을 바탕으로 (정말 감사합니다!) 대답은, Datatables.net에 대한 많은 용도, 여기에 수정이다 :

함수

/**
 * For handle click and single click in child's objects
 * @param {any} selector Parents selector, like 'tr'
 * @param {any} single_click_callback Callback for single click
 * @param {any} double_click_callback Callback for dblclick
 * @param {any} timeout Timeout, optional, 300 by default
 */
jQuery.fn.single_double_click = function (selector, single_click_callback, double_click_callback, timeout) {
    return this.each(function () {
        let clicks = 0;
        jQuery(this).on('click', selector, function (event) {
            let self = this;
            clicks++;
            if (clicks == 1) {
                setTimeout(function () {
                    if (clicks == 1) {
                        single_click_callback.call(self, event);
                    } else {
                        double_click_callback.call(self, event);
                    }
                    clicks = 0;
                }, timeout || 300);
            }
        });
    });
}

사용하다

$("#MyTableId").single_double_click('tr',
            function () {   //  Click
                let row = MyTable.row(this);
                let id = row.id();
                let data = row.data();
                console.log("Click in "+id+" "+data);
            },
            function () {   //  DBLClick
                let row = MyTable.row(this);
                let id = row.id();
                let data = row.data();
                console.log("DBLClick in "+id+" "+data);
            }
        );

16.이 me-를 위해 일

이 me-를 위해 일

var clicked=0;
function chkBtnClcked(evnt) {
    clicked++;
    // wait to see if dblclick
    if (clicked===1) {
        setTimeout(function() {
            clicked=0;
            .
            .
        }, 300); // test for another click within 300ms
    }
    if (clicked===2) {
        stopTimer=setInterval(function() {
            clicked=0;
            .
            .
        }, 30*1000); // refresh every 30 seconds
    }
}

용법-

<div id="cloneimages" style="position: fixed;" onclick="chkBtnClcked(evnt)"  title="Click for next pic; double-click for slide show"></div>

17.그냥 필요가 쉽고 HTML로 그냥 경우 기본 HTML 응답을 게시.

그냥 필요가 쉽고 HTML로 그냥 경우 기본 HTML 응답을 게시.
```
<p ondblclick="myFunction()" id = 'id'>Double-click me</p>
```
물론 이것은 기본 JQuery와 옵션이 있습니다. 즉 ... $ ( '# 아이디'). ATTR ( 'ondblclick', 기능 () {...}) 또는, 이전에 언급 한 바와 같이, $ ( '# 아이디'). dblclick (함수 () {... });
18.나는 이것이 오래 알고 있지만, 아래의 더블 클릭 대 하나를 결정하는 하나의 타이머 기본 루프 카운터의 JS 유일한 예이다. 희망이 사람을 도움이됩니다.

나는 이것이 오래 알고 있지만, 아래의 더블 클릭 대 하나를 결정하는 하나의 타이머 기본 루프 카운터의 JS 유일한 예이다. 희망이 사람을 도움이됩니다.
```
var count = 0;
var ele = document.getElementById("my_id");
ele.addEventListener('click', handleSingleDoubleClick, false); 

function handleSingleDoubleClick()
{
  if(!count) setTimeout(TimerFcn, 400); // 400 ms click delay
  count += 1;
}
function TimerFcn() 
{
  if(count > 1) console.log('you double clicked!')
  else console.log('you single clicked')
  count = 0;
}
```

from https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 왜 jQuery를 클릭 기능이 작동하지 않습니다? (0)	2020.10.19
[JQUERY] 어떻게 CSS3 / 자바 스크립트와 스타일 "입력 파일"에? [복제] (0)	2020.10.19
[JQUERY] jQuery로 DIV 요소의 순서를 무작위 (0)	2020.10.19
[JQUERY] 언제, 왜 자바 스크립트에서 '반환 거짓'에? (0)	2020.10.19
[JQUERY] XMLHttpRequest 객체는 jQuery로 URL을로드 할 수 없습니다 (0)	2020.10.19

복붙노트

[JQUERY] 어떻게 단 한번의 클릭 이벤트를 두 번 클릭 이벤트를 차별화?

어떻게 단 한번의 클릭 이벤트를 두 번 클릭 이벤트를 차별화?

해결법

1.당신은 첫 번째 클릭 후 다른 클릭이 있는지 확인하기 위해 제한 시간을 사용해야합니다.

2.dblclick 이벤트의 동작은 쿼크 모드에 설명되어 있습니다.

3.대신이 이벤트 객체에서 액세스 할 수있는 네이티브라는 속성 세부가에서 더 많은 임시 주와의 setTimeout, 회전을 활용!

4.간단한 기능. 어떤 JQuery와 또는 다른 프레임 워크가 필요하지 않습니다. 당신의 기능을 매개 변수로 전달

5.나는 행동이 따라 브라우저 것을 두려워 :

6.그럼 더블 클릭하려면 먼저 한 번 클릭해야합니다 (두 번 클릭). 경고가 팝업 때문에 클릭 () 핸들러 화재는 첫 번째 클릭에, 그리고, 당신은 dblclick () 핸들러를 발사 할 수있는 두 번째 클릭을 할 수있는 기회가 없습니다.

7.이 답변 시간을 통해 쓸모 만들어 체크 @ KYW의 솔루션을.

8.A1rPun의 답변에 따라 또 다른 간단한 바닐라 솔루션 (JQuery와 솔루션에 대한 자신의 바이올린을보고, 모두가이 일에).

9.다음은 이벤트의 임의의 수에 대한 jeum의 다른 코드는 다음과 같습니다

10.어떻게 하나의 동일한 요소에 하나의 클릭과 더블 클릭을 구별하는 방법?

12.현대 정답은 허용 대답과 @kyw의 솔루션 사이의 혼합이다. 당신은 첫 번째 단 한번의 클릭과 두 번째 클릭을 방지하기 위해에서는 event.detail 체크를 방지하기 위해 제한 시간이 필요합니다.

13.난 당신이 더블 클릭에서 singleclick을 차별화하기 위해 사용자 정의 'singleclick'이벤트를 사용할 수있는 간단한 jQuery를 플러그인을 썼다 :

14.피하기 JQuery와 (과 다른 90-140k libs와)에 같은 I, 및 지적 브라우저가 onclick을 먼저 처리로, 그래서 여기에 내가 (이 예는 또한 클릭 된 위치 지역의 x 및 y를 받고 커버) 내가 만든 웹 사이트에 무슨 짓을

15.아드 슐러을 바탕으로 (정말 감사합니다!) 대답은, Datatables.net에 대한 많은 용도, 여기에 수정이다 :

16.이 me-를 위해 일

17.그냥 필요가 쉽고 HTML로 그냥 경우 기본 HTML 응답을 게시.

18.나는 이것이 오래 알고 있지만, 아래의 더블 클릭 대 하나를 결정하는 하나의 타이머 기본 루프 카운터의 JS 유일한 예이다. 희망이 사람을 도움이됩니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바