Chrome 47-এ একটি নতুন বৈশিষ্ট্য রয়েছে যা ব্যবহারকারীরা কীভাবে আপনার সাইটের সাথে ইন্টারঅ্যাক্ট করে তা বোঝা সহজ করে তোলে: InputDeviceCapabilities ! আসুন একটু পিছিয়ে যাই এবং শিখি কেন এটি গুরুত্বপূর্ণ।
DOM ইনপুট ইভেন্টগুলি নিম্ন-স্তরের ইনপুট ইভেন্টগুলির উপরে একটি বিমূর্ততা, যা শারীরিক ডিভাইস ইনপুটের সাথে আলগাভাবে বাঁধা (যেমন, click ইভেন্টগুলি মাউস, টাচস্ক্রিন বা কীবোর্ড দ্বারা গুলি করা যেতে পারে)। যাইহোক, একটি সমস্যা আছে: একটি ইভেন্টের জন্য দায়ী শারীরিক ডিভাইসের বিশদ বিবরণ প্রাপ্ত করার কোন সহজ পদ্ধতি নেই।
উপরন্তু, নির্দিষ্ট ধরনের ইনপুট সামঞ্জস্যের কারণে আরও "জাল" DOM ইনপুট ইভেন্ট তৈরি করতে পারে। এই ধরনের একটি জাল DOM ঘটনা ঘটে যখন একজন ব্যবহারকারী একটি টাচ স্ক্রীন (যেমন একটি মোবাইল ফোনে) ট্যাপ করে; এটি শুধুমাত্র স্পর্শ ইভেন্টগুলিই নয়, সামঞ্জস্যের কারণে, মাউস ইভেন্টগুলিকেও।
মাউস এবং টাচ ইনপুট উভয় সমর্থন করার সময় এটি বিকাশকারীদের জন্য সমস্যা সৃষ্টি করে। এটা জানা কঠিন যে একটি mousedown ইভেন্ট আসলে একটি মাউস থেকে নতুন ইনপুট প্রতিনিধিত্ব করে, নাকি পূর্বে প্রক্রিয়া করা টাচস্টার্ট ইভেন্টের জন্য একটি সামঞ্জস্যপূর্ণ ইভেন্ট।
নতুন InputDeviceCapabilities API UIEvent-এ একটি sourceCapabilities অবজেক্টের মাধ্যমে ইনপুট ইভেন্টের অন্তর্নিহিত উৎস সম্পর্কে বিশদ প্রদান করে।
বস্তুটির একটি firesTouchEvents বৈশিষ্ট্য রয়েছে যা ব্যবহারকারীর ক্রিয়াকলাপের দ্বারা ইভেন্টটি কীভাবে তৈরি হয়েছে তার উপর ভিত্তি করে true বা false সেট করা হয়৷
প্রশ্ন হল: এটি কোথায় ব্যবহার করা উচিত?
পয়েন্টার ইভেন্টের বাইরে, অনেক ডেভেলপার আজ টাচ-লেয়ারে ইন্টারঅ্যাকশনের লজিক পরিচালনা করে, প্রথম স্থানে "নকল" মাউস ইভেন্ট তৈরি করা এড়াতে ডিফল্ট প্রতিরোধ করে৷ এই নকশাটি অনেক পরিস্থিতিতে ভাল কাজ করে এবং নেওয়ার জন্য পরিবর্তন করার প্রয়োজন নেই৷ ইনপুট ডিভাইস সক্ষমতার সুবিধা।
কিন্তু কিছু পরিস্থিতিতে আপনি সত্যিই স্পর্শ ইভেন্ট ডিফল্ট প্রতিরোধ করতে চান না; উদাহরণস্বরূপ, আপনি এখনও 'ক্লিক' ইভেন্ট পাঠাতে এবং ফোকাস পরিবর্তন করতে ট্যাপ চান। এই ক্ষেত্রে, MouseEvent.sourceCapabilities.firesTouchEvents প্রপার্টিতে থাকা তথ্য আপনাকে টাচ- এবং মাউস-ভিত্তিক ইভেন্টগুলির জন্য লজিককে একটি মডেলে একীভূত করা শুরু করতে দেয় যা আপনি পয়েন্টার ইভেন্টগুলির সাথে লজিক পরিচালনা করার অনুরূপ । অর্থাৎ, আপনার কাছে কোডের মাত্র একটি সেট থাকতে পারে যা ইন্টারঅ্যাকশন লজিক পরিচালনা করে এবং বিকাশকারীদেরকে পয়েন্টার ইভেন্টগুলি সমর্থন করে এবং সমর্থন করে না এমন ব্রাউজারগুলির মধ্যে যুক্তি ভাগ করার একটি সহজ উপায় প্রদান করে৷
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
ভাল খবর হল এটি রিক বায়ার্স দ্বারা পলিফিল করা হয়েছে যাতে আপনি এটি বেশিরভাগ প্ল্যাটফর্ম জুড়ে ব্যবহার করতে পারেন।
আজ এই APIটি ন্যূনতম, স্পর্শ ইভেন্ট থেকে প্রাপ্ত মাউস ইভেন্টগুলি সনাক্ত করার সাথে একটি নির্দিষ্ট সমস্যা সমাধানের উপর দৃষ্টি নিবদ্ধ করে৷ এমনকি InputDeviceCapabilities এর একটি উদাহরণ তৈরি করাও সম্ভব; তবে, এতে শুধুমাত্র firesTouchEvents রয়েছে। ভবিষ্যতে ব্যবহারকারীর সিস্টেমে সমস্ত ইনপুট ডিভাইস সম্পর্কে আরও বুঝতে আপনাকে সক্ষম করার জন্য এটি প্রসারিত হবে বলে আশা করা হচ্ছে। আমরা ব্যবহারের ক্ষেত্রে আপনার প্রতিক্রিয়া পেতে চাই।