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
});
});
.on()এখন উভয়ের উপরে ব্যবহার করুন
$("document").on("click","a" function(e){লাইনে 5 এর পরিবর্তে delegate()ব্যবহার করুন This আপনার পরিবর্তে ডম-ডাউনের documentযেকোন প্যারেন্ট অবজেক্টটি aযতক্ষণ সম্ভব ট্র্যাটের সময় অবধি ব্যবহার করতে পারবেন / করা উচিত ।
"নোট প্রতিক্রিয়া" থেকে প্রদত্ত সমাধানটি উভয় ইভেন্টগুলিকেই আগুনে জ্বলতে দেখায়, ডাবলিক্লিক করা হলে ক্লিক করুন এবং ডাব্লিক্লিক করুন। তবে আমি মনে করি এটি সঠিক দিক নির্দেশ করে।
আমি একটি ছোট পরিবর্তন করেছি, এটি ফলাফল:
$("#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। একটি পরিবর্তনশীল তৈরি করুন যা প্রতিটি ক্লিকে বৃদ্ধি পায়। তারপরে একটি সেট বিলম্বের পরে পুনরায় সেট করা। সেটটাইমআউট ফাংশনের অভ্যন্তরে আপনি কিছু করতে পারেন ...
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
}
});
অতিরিক্ত ক্লিকের জন্য অপেক্ষা করার জন্য আপনি সম্ভবত ক্লিক / ডিবিএলক্লিকের নিজস্ব কাস্টম বাস্তবায়ন লিখতে পারেন। আমি মূল jQuery ফাংশনগুলিতে এমন কিছু দেখতে পাচ্ছি না যা আপনাকে এটি অর্জনে সহায়তা করবে।
JQuery সাইটে .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 প্লাগইন লিখেছি যা ক্লিক এবং ডিবিএলক্লিক ইভেন্টগুলি প্রতিনিধিত্ব করার অনুমতি দেয়
// 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/
এইচটিএমএল কোড
<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)
});
এটা খুব laggy না
এই সমাধানটি আমার পক্ষে কাজ করে
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);
এবং অবশেষে আমরা হিসাবে ব্যবহার।
$("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
});
});
এটি এমন একটি পদ্ধতি যা আপনি বুনিয়াদি জাভাস্ক্রিপ্ট ব্যবহার করে করতে পারেন যা আমার পক্ষে কাজ করে:
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
}
});
});
ফায়ারফক্স / ক্রোমে ক্লিক করা উপাদানগুলি ক্লিক করুন ডেটা-ক্লিকগুলি উপরে ক্লিক করে উপরে ক্লিক করার সাথে সাথে সময় অনুসারে (1000) সামঞ্জস্য করুন।