स्पर्श का पता लगाने की कोशिश के साथ सबसे बड़ा "गोचा" हाइब्रिड उपकरणों पर है जो स्पर्श और ट्रैकपैड / माउस दोनों का समर्थन करते हैं। यहां तक कि अगर आप सही तरीके से यह पता लगाने में सक्षम हैं कि उपयोगकर्ता का डिवाइस स्पर्श का समर्थन करता है, तो आपको वास्तव में यह पता लगाने की आवश्यकता है कि उपयोगकर्ता वर्तमान में किस इनपुट डिवाइस का उपयोग कर रहा है। इस चुनौती का विस्तृत विवरण और यहाँ एक संभावित समाधान है ।
मूल रूप से यह पता लगाने के लिए कि क्या उपयोगकर्ता ने केवल स्क्रीन को छुआ है या इसके बजाय माउस / ट्रैकपैड का उपयोग किया है , पृष्ठ पर एक 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
})();
अधिक जानकारी यहाँ ।