Есть ли что-то в jquery, которое позволило бы мне различать поведение при двойном щелчке и одним щелчком?
Когда я связываю оба с одним и тем же элементом, выполняется только один клик.
Есть ли способ, который ждет некоторое время перед выполнением одного клика, чтобы узнать, нажимает ли пользователь повторно или нет?
Спасибо:)
Я обнаружил, что ответ Джона Стриклера не совсем сделал то, что я ожидал. Как только предупреждение запускается вторым щелчком в двухсекундном окне, каждый последующий щелчок запускает другое предупреждение, пока вы не подождаете две секунды, прежде чем нажимать снова. Таким образом, с кодом Джона тройной щелчок действует как два двойных щелчка, где я ожидаю, что он будет действовать как двойной клик, за которым следует один клик.
Я переработал его решение, чтобы функционировать таким образом и течь таким образом, чтобы разум мог лучше понять. Я отложил задержку с 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
});
});
Конечно, привяжите два обработчика, один к 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
}
});
Решение, указанное в "Ответ 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, чтобы дождаться дополнительного клика. Я не вижу ничего в основных функциях jQuery, которые помогут вам в этом.
Цитата из . dblclick() на сайте jQuery
Не рекомендуется привязывать обработчики к событиям щелчка и 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
});
Демо здесь http://jsfiddle.net/cB484/
Я написал плагин jQuery, который позволяет также делегировать события click и 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);
Это решение работает для меня
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/533135/VHkLR/5/
html-код
<p>Click on this paragraph.</p>
<b> </b>
script код
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 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/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);
И, наконец, мы используем как.
$("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), чтобы оно соответствовало.