jquery에 두 번 클릭과 단일 클릭의 동작을 구분할 수있는 것이 있습니까?
둘 다 동일한 요소에 바인딩하면 한 번의 클릭 만 실행됩니다.
사용자가 다시 클릭하는지 여부를 확인하기 위해 한 번의 클릭을 실행하기 전에 잠시 기다리는 방법이 있습니까?
감사 :)
답변:
나는 John Strickler의 대답이 내가 기대했던 것과는 다르다는 것을 알았습니다. 2 초 창 내에서 두 번째 클릭으로 경고가 트리거되면 다시 클릭하기 전에 2 초를 기다릴 때까지 모든 후속 클릭이 다른 경고를 트리거합니다. 따라서 John의 코드에서 세 번 클릭은 두 번의 두 번 클릭으로 작동하며 두 번 클릭 한 다음 한 번의 클릭으로 작동 할 것으로 예상합니다.
나는 이런 식으로 작동하고 내 마음이 더 잘 이해할 수있는 방식으로 흐르도록 그의 해결책을 재 작업했습니다. 정상적인 감도라고 느끼는 것을 더 잘 시뮬레이션하기 위해 지연을 2000에서 700으로 줄였습니다. 여기 바이올린이 있습니다 : 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
});
});
.on()지금은 그 모두 이상
$("document").on("click","a" function(e){대신 5 행에서 사용 delegate()합니다. 이 구조는 더 이상 사용 되지 않는 사용을 대체 합니다. 대신 가능한 한 최저 시간 동안 지속되는 DOM document의 부모 객체를 사용할 수 있습니다 a.
"Nott Responding"에서 제공된 솔루션은 두 이벤트를 모두 발생시키는 것으로 보입니다. 두 번 클릭하면 클릭 및 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);
}
});시도 해봐
물론, 하나는 click에, 다른 하나는 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
}
});추가 클릭을 기다리도록 click / dblclick의 사용자 지정 구현을 작성할 수 있습니다. 나는 이것을 달성하는 데 도움이 될 핵심 jQuery 기능에 아무것도 보이지 않습니다.
jQuery 사이트의 .dblclick () 에서 인용
동일한 요소에 대해 click 및 dblclick 이벤트 모두에 핸들러를 바인딩하는 것은 바람직하지 않습니다. 트리거되는 이벤트의 순서는 브라우저마다 다르며, 일부는 dblclick 전에 두 번의 클릭 이벤트를 수신하고 다른 일부는 하나만 수신합니다. 더블 클릭 민감도 (더블 클릭으로 감지되는 클릭 사이의 최대 시간)는 운영 체제와 브라우저에 따라 다를 수 있으며 사용자가 구성 할 수있는 경우가 많습니다.
다음 코드를보세요
$("#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
});클릭 및 dblclick 이벤트를 위임 할 수있는 jQuery 플러그인을 작성했습니다.
// 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);$("body").multipleClicks('#mySelector', function(){ /* do something on click */},function(){/* do something on doubleclick */},300);
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
});이 간단한 솔루션, 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)
});
그다지 느슨하지 않다
이 솔루션은 저에게 효과적입니다.
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++;
});나는 여전히 훌륭하게 작동하는 위의 답변을 약간 변경했습니다 : http://jsfiddle.net/arondraper/R8cDR/
(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);그리고 마지막으로 우리는 as를 사용합니다.
$("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);
}
});위의 답변과 동일하지만 세 번 클릭 할 수 있습니다. (지연 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
});
});이것은 기본 JavaScript를 사용하여 수행 할 수있는 방법입니다.
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");
}다음은 문제에 대한 나의 간단한 접근 방식입니다.
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
}
});
});Firefox / Chrome에서 클릭 한 요소를 검사하여 클릭 할 때 데이터 클릭이 위아래로 움직이는 지 확인하고 시간 (1000)을 적절하게 조정합니다.