Jquery bind double clic et simple clic séparément
Existe-t-il quelque chose dans jQuery qui me permettrait de différencier le comportement en double clic et en simple clic?
Lorsque je lie les deux au même élément, seul le clic simple est exécuté.
Existe-t-il un moyen d'attendre un certain temps avant l'exécution du clic simple pour voir si l'utilisateur clique à nouveau ou pas?
Merci :)
J'ai trouvé que la réponse de John Strickler ne faisait pas tout à fait ce à quoi je m'attendais. Une fois que l'alerte est déclenchée par un deuxième clic dans la fenêtre de deux secondes, chaque clic suivant déclenche une autre alerte jusqu'à ce que vous attendiez deux secondes avant de cliquer à nouveau. Donc, avec le code de John, un triple clic équivaut à deux doubles clics et je suppose qu'il se comportera comme un double clic suivi d'un simple clic.
J'ai retravaillé sa solution pour fonctionner de cette manière et pour que mon esprit puisse mieux comprendre. J'ai passé le délai de 2000 à 700 pour mieux simuler ce que je penserais être une sensibilité normale. Voici le violon: http://jsfiddle.net/KpCwN/4/ .
Merci pour la fondation, John. J'espère que cette version alternative est utile aux autres.
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
});
});
La solution donnée par "Nott Responding" semble déclencher les deux événements, click et dblclick lorsque vous double-cliquez. Cependant, je pense que cela va dans la bonne direction.
J'ai fait un petit changement, voici le résultat:
$("#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);
}
});
L'essayer
Bien sûr, liez deux gestionnaires, l'un à click et l'autre à dblclick. Créez une variable qui s'incrémente à chaque clic. puis réinitialise après un délai défini. Dans la fonction setTimeout, vous pouvez faire quelque chose ...
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
}
});
Vous pourriez probablement écrire votre propre implémentation personnalisée de click/dblclick pour qu’elle attende un clic supplémentaire. Je ne vois rien dans les fonctions de base de jQuery qui vous aiderait à atteindre cet objectif.
Citation de . Dblclick () sur le site jQuery
Il est déconseillé de lier des gestionnaires aux événements click et dblclick du même élément. La séquence d'événements déclenchés varie d'un navigateur à l'autre, certains recevant deux événements de clic avant le clic sur dblclick, d'autres un seul. La sensibilité du double-clic (le délai maximal entre les clics détecté comme un double-clic) peut varier en fonction du système d'exploitation et du navigateur, et est souvent configurable par l'utilisateur.
J'ai écrit un plugin jQuery qui permet également de déléguer les événements click et 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);
Regardez le code suivant
$("#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
});
La démo va ici http://jsfiddle.net/cB484/
j'implémente cette solution simple, http://jsfiddle.net/533135/VHkLR/5/
code HTML
<p>Click on this paragraph.</p>
<b> </b>
code de 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)
});
ce n'est pas beaucoup laggy
Cette solution fonctionne pour moi
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++;
});
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
});
Ci-dessous, mon approche simple de la question.
Fonction 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);
});
}
La mise en oeuvre:
$(function () {
$("a").trackClicks();
$("a").click(function () {
if ($(this).attr("data-clicks") === "2") {
// Double clicked
}
});
});
Inspectez l'élément cliqué dans Firefox/Chrome pour voir les clics de données monter et descendre au fur et à mesure que vous cliquez, ajustez le temps (1000) selon vos besoins.
Identique à la réponse ci-dessus mais permet le triple clic. (Délai 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
});
});
J'ai apporté quelques modifications aux réponses ci-dessus qui fonctionnent toujours très bien: http://jsfiddle.net/arondraper/R8cDR/
C'est une méthode que vous pouvez utiliser en utilisant le code JavaScript de base, qui fonctionne pour moi:
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");
}
(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);
Et finalement nous utilisons comme.
$("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);
}
});