স্পর্শ সনাক্ত করার চেষ্টা করার সাথে সর্বাধিক "গেটচা" হ'ল হাইব্রিড ডিভাইসে যা স্পর্শ এবং ট্র্যাকপ্যাড / মাউস উভয়কেই সমর্থন করে। এমনকি যদি আপনি ব্যবহারকারীর ডিভাইস স্পর্শ সমর্থন করে কিনা তা সঠিকভাবে সনাক্ত করতে সক্ষম হয়েও, আপনাকে এখন যা করতে হবে তা ব্যবহারকারী বর্তমানে ইনপুট ডিভাইসটি কী ব্যবহার করছে তা সনাক্ত করা উচিত। এখানে এই চ্যালেঞ্জটির একটি বিশদ লিখন এবং একটি সম্ভাব্য সমাধান রয়েছে ।
মূলত কোনও ব্যবহারকারী কেবল স্ক্রিনটি স্পর্শ করেছেন বা তার পরিবর্তে একটি মাউস / ট্র্যাকপ্যাড ব্যবহার করেছেন কিনা তা নির্ধারণের পদ্ধতির বিষয়টি হ'ল পৃষ্ঠায় একটি touchstartএবং mouseoverইভেন্ট উভয়ই নিবন্ধিত করা :
document.addEventListener('touchstart', functionref, false) // on user tap, "touchstart" fires first
document.addEventListener('mouseover', functionref, false) // followed by mouse event, ie: "mouseover"
একটি স্পর্শ ক্রিয়া এই উভয় ইভেন্টকেই ট্রিগার করবে যদিও প্রাক্তন ( touchstart) সর্বদা বেশিরভাগ ডিভাইসে প্রথমে থাকে। সুতরাং ইভেন্টগুলির অনুমানযোগ্য ক্রমটি গণনা করে আপনি এমন একটি প্রক্রিয়া তৈরি করতে পারেন can-touchযা ডকুমেন্টের এই মুহুর্তে ব্যবহারকারীর বর্তমান ইনপুট ধরণের প্রতিফলিত করতে ডকুমেন্টের মূলটিতে একটি শ্রেণিকে গতিশীলভাবে যুক্ত বা সরিয়ে ফেলতে পারে :
;(function(){
var isTouch = false //var to indicate current input type (is touch versus no touch)
var isTouchTimer
var curRootClass = '' //var indicating current document root class ("can-touch" or "")
function addtouchclass(e){
clearTimeout(isTouchTimer)
isTouch = true
if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
curRootClass = 'can-touch'
document.documentElement.classList.add(curRootClass)
}
isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
}
function removetouchclass(e){
if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
isTouch = false
curRootClass = ''
document.documentElement.classList.remove('can-touch')
}
}
document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})();
আরও বিশদ এখানে ।