나는 id와 함께 단일 버튼을 가지고 있습니다 "my_id". 이 요소로 두 개의 jQuery 이벤트를 첨부했습니다.
1.
$("#my_id").click(function() {
alert('single click');
});2.
$("#my_id").dblclick(function() {
alert('double click');
});그러나 매번 그것은 나에게 single click
답변
첫 번째 클릭 후 다른 클릭이 있는지 확인하려면 시간 제한을 사용해야합니다.
// 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/
답변
dblclick이벤트 의 동작은 Quirksmode 에서 설명 합니다.
의 이벤트 순서 dblclick는 다음과 같습니다.
- mousedown
- mouseup
- 딸깍 하는 소리
- mousedown
- mouseup
- 딸깍 하는 소리
- dblclick
이 규칙에 대한 한 가지 예외는 (물론) 사용자 지정 순서가 다음과 같은 Internet Explorer입니다.
- mousedown
- mouseup
- 딸깍 하는 소리
- mouseup
- dblclick
보시다시피 동일한 요소에서 두 이벤트를 함께 수신하면 click핸들러 에 대한 추가 호출이 발생 합니다.
답변
더 많은 임시 상태와 setTimeout을 사용하는 대신 객체 detail에서 액세스 할 수있는 라는 네이티브 속성 이 있습니다 event!
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
답변
간단한 기능. 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>답변
동작이 브라우저에 따라 다릅니다.
동일한 요소에 대해 click 및 dblclick 이벤트 모두에 핸들러를 바인딩하는 것은 바람직하지 않습니다. 트리거되는 이벤트의 순서는 브라우저마다 다르며, 일부는 dblclick 전에 두 번의 클릭 이벤트를 수신하고 다른 일부는 하나만 수신합니다. 더블 클릭 민감도 (더블 클릭으로 감지되는 클릭 사이의 최대 시간)는 운영 체제와 브라우저에 따라 다를 수 있으며 사용자가 구성 할 수있는 경우가 많습니다.
http://api.jquery.com/dblclick/
Firefox에서 코드를 실행하면 click()핸들러 의 alert () 가 두 번째 클릭을 방지합니다. 이러한 경고를 제거하면 두 이벤트가 모두 표시됩니다.
답변
더블 클릭 (두 번 클릭)하려면 먼저 한 번 클릭해야합니다. click()경고가 팝업 때문에 핸들러 화재는 첫 번째 클릭에, 그리고, 당신은 해고 할 수있는 두 번째 클릭 할 수있는 기회가없는 dblclick()핸들러를.
처리기를 변경하여 an 이외의 작업을 수행 alert()하면 동작을 볼 수 있습니다. (아마도 요소의 배경색을 변경) :
$("#my_id").click(function() {
$(this).css('backgroundColor', 'red')
});
$("#my_id").dblclick(function() {
$(this).css('backgroundColor', 'green')
});답변
이 답변은 시간이 지남에 따라 쓸모 없게 만들어졌습니다.
@AdrienSchuler가 게시 한 요점에서 영감을받은 솔루션을 만들었습니다. 한 번의 클릭과 두 번의 클릭을 요소에 바인딩하려는 경우에만이 솔루션을 사용하십시오. 그렇지 않으면 네이티브 click및 dblclick리스너를 사용하는 것이 좋습니다 .
차이점은 다음과 같습니다.
- Vanillajs, 종속성 없음
- 기다리지 마십시오
setTimeout에서 클릭 또는 더블 클릭 처리기를 처리 할 - 두 번 클릭하면 먼저 클릭 핸들러가 실행 된 다음 doubleclick 핸들러가 실행됩니다.
자바 스크립트 :
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 버튼은 허용되는 답변의 동작입니다.
jsfiddle
