একক ক্লিক এবং এক এবং একই উপাদানটিতে ডাবল ক্লিকের মধ্যে পার্থক্য কীভাবে?
আপনি তাদের মিশ্রিত করা প্রয়োজন হবে না থাকে, তাহলে আপনি উপর নির্ভর করতে পারেন clickএবং dblclickএবং প্রতিটি শুধু জরিমানা কাজ হবে।
তাদের মিশ্রিত করার চেষ্টা করার সময় একটি সমস্যা দেখা দেয়: একটি dblclickইভেন্ট আসলে একটি clickইভেন্টকেও ট্রিগার করবে , সুতরাং আপনার একক ক্লিকটি "স্ট্যান্ড-অলোন" একক ক্লিক বা ডাবল ক্লিকের অংশ কিনা তা নির্ধারণ করতে হবে।
অতিরিক্ত: আপনার clickএবং dblclickএক এবং একই উপাদান উভয় ব্যবহার করা উচিত নয় :
হ্যান্ডলারদের একই উপাদানটির জন্য ক্লিক এবং ডিবিএলক্লিক ইভেন্ট উভয়কে আবদ্ধ করা অযথাই। ট্রিগার হওয়া ইভেন্টগুলির ক্রমটি ব্রাউজার থেকে ব্রাউজারে পরিবর্তিত হয়, কিছুগুলি ডিবিএলক্লিকের আগে দুটি ক্লিক ইভেন্ট পেয়ে থাকে এবং অন্যরা কেবলমাত্র একটিতে। ডাবল ক্লিক সংবেদনশীলতা (ক্লিকের মধ্যে সর্বাধিক সময় যা ডাবল ক্লিক হিসাবে সনাক্ত করা হয়) অপারেটিং সিস্টেম এবং ব্রাউজারের দ্বারা পরিবর্তিত হতে পারে এবং প্রায়শই ব্যবহারকারী-কনফিগারযোগ্য হয়।
সূত্র: https://api.jquery.com/dblclick/
এখন সুসংবাদে:
ইভেন্টেরdetail সাথে সম্পর্কিত ক্লিকের সংখ্যা সনাক্ত করতে আপনি ইভেন্টটির সম্পত্তি ব্যবহার করতে পারেন । এটি clickসনাক্ত করতে মোটামুটি সহজ ভিতরে ডাবল ক্লিক করে তোলে ।
একক ক্লিকগুলি সনাক্ত করতে এবং তারা ডাবল ক্লিকের অংশ কিনা তা এখনও সমস্যা থেকে যায়। তার জন্য, আমরা একটি টাইমার এবং ফিরে এসেছি setTimeout।
একটি ডেটা অ্যাট্রিবিউট (বিশ্বব্যাপী পরিবর্তনশীল এড়াতে) ব্যবহার করে এবং ক্লিকগুলি নিজেরাই গণনা করার প্রয়োজন ছাড়াই এগুলি একসাথে মোড়ানো, আমরা পাই:
এইচটিএমএল:
<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>
<div id="log" style="background: #efefef;"></div>
javascript:
<script>
var clickTimeoutID;
$( document ).ready(function() {
$( '.clickit' ).click( function( event ) {
if ( event.originalEvent.detail === 1 ) {
$( '#log' ).append( '(Event:) Single click event received.<br>' );
/** Is this a true single click or it it a single click that's part of a double click?
* The only way to find out is to wait it for either a specific amount of time or the `dblclick` event.
**/
clickTimeoutID = window.setTimeout(
function() {
$( '#log' ).append( 'USER BEHAVIOR: Single click detected.<br><br>' );
},
500 // how much time users have to perform the second click in a double click -- see accessibility note below.
);
} else if ( event.originalEvent.detail === 2 ) {
$( '#log' ).append( '(Event:) Double click event received.<br>' );
$( '#log' ).append( 'USER BEHAVIOR: Double click detected.<br>' );
window.clearTimeout( clickTimeoutID ); // it's a dblclick, so cancel the single click behavior.
} // triple, quadruple, etc. clicks are ignored.
});
});
</script>
ডেমো:
JSfiddle
অ্যাক্সেসযোগ্যতা এবং ডাবল ক্লিকের গতি সম্পর্কে নোট:
- উইকিপিডিয়ায় যেমন লেখা আছে "ডাবল ক্লিক হিসাবে ব্যাখ্যা করার জন্য টানা দু'বার ক্লিকের জন্য প্রয়োজনীয় সর্বোচ্চ বিলম্ব মানহীন নয়"।
- ব্রাউজারে সিস্টেমের ডাবল-ক্লিকের গতি সনাক্ত করার কোনও উপায় নেই।
- ডিফল্টটি মনে হয় 500 এমএস এবং উইন্ডোজ ( উত্স ) এ 100-900 মিলিমিটারের ব্যাপ্তি রয়েছে
- প্রতিবন্ধী ব্যক্তিদের কথা চিন্তা করুন যারা তাদের ওএস সেটিংসে ডাবল ক্লিকের গতিটি সবচেয়ে ধীর করে দেন।
- যদি উপরে আমাদের ডিফল্ট 500 এমএসের চেয়ে সিস্টেম ডাবল ক্লিকের গতি ধীর হয় তবে একক এবং ডাবল-ক্লিক আচরণ দুটিই ট্রিগার হবে।
- হয় এক এবং একই আইটেমের সম্মিলিত একক এবং ডাবল ক্লিক উপর নির্ভর ব্যবহার করবেন না।
- অথবা: মান বাড়ানোর ক্ষমতা রাখার জন্য বিকল্পগুলিতে একটি সেটিং যুক্ত করুন।
একটি সন্তোষজনক সমাধান পেতে কিছুটা সময় নিয়েছে, আমি আশা করি এটি সাহায্য করবে!