जावास्क्रिप्ट के साथ टच स्क्रीन उपकरणों का पता लगाना

Question

जावास्क्रिप्ट / jQuery में, मैं कैसे पता लगा सकता हूं कि क्लाइंट डिवाइस में माउस है?

मुझे एक साइट मिली है, जब उपयोगकर्ता किसी आइटम पर अपने माउस को घुमाता है, तो थोड़ा जानकारी पैनल होता है। मैं hover का पता लगाने के लिए jQuery.hoverIntent का उपयोग कर रहा हूं, लेकिन यह स्पष्ट रूप से iPhone / iPad / Android जैसे टचस्क्रीन उपकरणों पर काम नहीं करता है। तो उन उपकरणों पर जो मैं जानकारी पैनल दिखाने के लिए टैप करना चाहता हूं।

Comments

तुम दोनों क्यों नहीं कर सकते? गैर-टचस्क्रीन उपकरणों में नल की कार्यक्षमता अवांछनीय है?

— EMPraptor

चूँकि कुछ नए उपकरण समर्थन नहीं करते हैं :hover, इसलिए यह संभवत: बेहतर है ( :hoverविशुद्ध रूप से कॉस्मेटिक प्रयोजनों के लिए उपयोग करने के लिए कई उपकरणों के लिए एक स्टाइलशीट को कोड करना) ।

— परिश्रम से काम करना

@ बेरोजगार: अच्छी बात है - हां मैं ऐसा कर सकता था। हालाँकि ... हम हमेशा टचस्क्रीन डिवाइस पर पैनल दिखाने के बारे में सोच रहे थे - जिस स्थिति में मुझे समर्थन का पता लगाने में सक्षम होना चाहिए।

— ब्रैड रॉबिन्सन

यदि आप हमेशा टचस्क्रीन उपकरणों पर पैनल दिखा सकते हैं, तो क्या आप इसे अन्य उपकरणों पर भी नहीं दिखा सकते हैं? पैनल कितना बड़ा है और इसे केवल हॉवर / टैप पर दिखाना वांछनीय क्यों है?

— EMPraptor

के संभावित डुप्लिकेट क्या एक 'टच स्क्रीन' डिवाइस जावास्क्रिप्ट का उपयोग पता लगाने के लिए सबसे अच्छा तरीका क्या है?

— एंड्रयू व्हाइटेकर

Answer 1

+1 करने hoverऔर clickदोनों के लिए। एक अन्य तरीका सीएसएस मीडिया प्रश्नों का उपयोग कर सकता है और कुछ शैलियों का उपयोग केवल छोटे स्क्रीन / मोबाइल उपकरणों के लिए किया जा सकता है, जो स्पर्श या टैप कार्यक्षमता के लिए सबसे अधिक संभावना है। इसलिए यदि आपके पास CSS के माध्यम से कुछ विशिष्ट शैलियाँ हैं, और jQuery से आप उन मोबाइल डिवाइस शैली गुणों के लिए उन तत्वों की जाँच करते हैं, जिन्हें आप मोबाइल विशिष्ट कोड लिखने के लिए उन पर हुक कर सकते हैं।

यहां देखें: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

Comments

अच्छा समाधान, आप शायद एक के साथ एक होवर चेक की तरह कुछ कर सकते हैं () बांधें ताकि यह केवल पहली बार के आसपास आग हो।

— टिमोथी पेरेज़

समस्या यह है कि यदि आप स्क्रीन की चौड़ाई के आधार पर लक्ष्य बनाते हैं तो जब आप अपने डिवाइस को घुमाते हैं (आइए iphone 6+ 736x414 लेते हैं) तो इसकी शैली समान नहीं होगी। तो सबसे अच्छा समाधान नहीं: /

— antoni

Answer 2

var isTouchDevice = 'ontouchstart' in document.documentElement;

नोट : सिर्फ इसलिए कि एक उपकरण स्पर्श घटनाओं का समर्थन करता है, इसका मतलब यह नहीं है कि यह विशेष रूप से एक टच स्क्रीन डिवाइस है। कई डिवाइस (जैसे कि मेरा आसुस ज़ेनबुक) क्लिक और टच इवेंट दोनों का समर्थन करते हैं, तब भी जब उनके पास कोई वास्तविक स्पर्श इनपुट तंत्र नहीं होता है। स्पर्श समर्थन के लिए डिज़ाइन करते समय, हमेशा क्लिक इवेंट समर्थन शामिल करें और कभी भी यह न मानें कि कोई उपकरण विशेष रूप से एक या दूसरा है।

Comments

जैसा कि मॉडर्निज़्र डॉक्स में वर्णित है, यह केवल ब्राउज़र की क्षमता का पता लगाता है , न कि डिवाइस की क्षमता का ... आपको टच-सक्षम ब्राउज़र चलाने वाले बिना टच इनपुट वाले उपकरणों पर गलत सकारात्मक परिणाम मिलेगा। मुझे डिवाइस टच क्षमता का पता लगाने का कोई तरीका नहीं पता है , बस एक टच इवेंट के होने का इंतजार किए बिना।

— स्टु कॉक्स

आईई 10 टच का पता लगाने के लिए मैं उपयोग कर रहा हूं: (window.navigator.msMaxTouchPoints) (डॉक्यूमेंटेशन में '' ontouchstart ');

— अलेक्जेंडर केलेट

'ontouchstart' in document.documentElement ब्लैकबेरी 9300 पर

— सरल

@typhon यदि सॉफ़्टवेयर (Win 8, आधुनिक ब्राउज़र) स्पर्श का समर्थन करता है, तो यह हमेशा सच होगा - भले ही आप हार्डवेयर (डेस्कटॉप, मानक मॉनिटर, माउस और कीबोर्ड) पर हों जो स्पर्श का समर्थन नहीं करता है। इसलिए यह समाधान पुराना है।

— बार्नी

funnyItsNotCamelCaseAsJsIsThroughout। मेरा मतलब है कि लोगों को अब कोड को कॉपी, पेस्ट और एडिट करना होगा। :)

— रॉस

Answer 3

विंडो के लिए मिला परीक्षण। थूक एंड्रॉइड पर काम नहीं करता है, लेकिन यह करता है:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

लेख देखें: जावास्क्रिप्ट का उपयोग करके 'टच स्क्रीन' डिवाइस का पता लगाने का सबसे अच्छा तरीका क्या है?

Comments

यह टच स्क्रीन का पता लगाता है, लेकिन सावधान रहें क्योंकि यह टच स्क्रीन वाले लैपटॉप के लिए TRUE लौटाता है। यदि आप फोन / टैबलेट या कंप्यूटर / लैपटॉप से ​​उपयोगकर्ता को अलग करने की कोशिश कर रहे हैं तो यह एक समस्या हो सकती है क्योंकि टच स्क्रीन वाले लैपटॉप के लिए यह TRUE देता है।

— मिलाएं

Answer 4

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

MsMaxTouchPoints के साथ maxTouchPoints का उपयोग करने का कारण:

Microsoft ने कहा है कि Internet Explorer 11 के साथ शुरू होने पर, Microsoft विक्रेता इस संपत्ति (msMaxTouchPoints) के उपसर्ग संस्करण को हटा सकता है और इसके बजाय maxTouchPoints का उपयोग करने की सिफारिश कर सकता है।

स्रोत: http://ctrlq.org/code/19616-detect-touch-screen-javascript

Comments

यह काम किया और गूगल क्रोम डेवलपर टूल्स में काम किया अनुकरण डिवाइस धन्यवाद

— बेहनाम मोहम्मदी

Answer 5

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

हर जगह काम करता है !!

Comments

और माउस के साथ क्या करना है? (वास्तविक प्रश्न)

— हेक्सालिस

यह करना आसान होगाisTouch = "ontouchstart" in window || navigator.msMaxTouchPoints;

— एंड्रयू

Answer 6

मैं उपयोग करता हूं:

if(jQuery.support.touch){
    alert('Touch enabled');
}

jQuery के मोबाइल में 1.0.1

Comments

jQuery के Modernizr (के पक्ष में jQuery.support उपयोग करने के खिलाफ की सिफारिश की modernizr.com - संदर्भ:) api.jquery.com/jQuery.support -

— जोनाथन Marzullo

Answer 7

Google Chrome इस पर झूठी सकारात्मक वापसी करता है:

var isTouch = 'ontouchstart' in document.documentElement;

मुझे लगता है कि इसकी "स्पर्श घटनाओं का अनुकरण" करने की क्षमता के साथ कुछ करना है (F12 -> निचले दाएं कोने पर सेटिंग्स -> "ओवरराइड्स" टैब -> अंतिम चेकबॉक्स)। मुझे पता है कि यह डिफ़ॉल्ट रूप से बंद हो गया है, लेकिन यह कि मैं परिणामों में परिवर्तन (क्रोम में काम करने के लिए उपयोग की जाने वाली "विधि") से जोड़ता हूं। हालाँकि, यह काम कर रहा है, जहाँ तक मैंने परीक्षण किया है:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

सभी ब्राउज़र मैंने उस कोड को राज्य पर टाइप किया है टाइपोफ़ "ऑब्जेक्ट" है, लेकिन मुझे यह जानकर और भी कुछ महसूस होता है कि यह जो भी है लेकिन अपरिभाषित है :-)

IE7, IE8, IE9, IE10, क्रोम 23.0.1271.64, iPad 21.0.1180.80 और iPad सफारी के लिए क्रोम पर परीक्षण किया गया। यह अच्छा होगा यदि किसी ने कुछ और परीक्षण किए और परिणाम साझा किए।

Comments

दोनों विधियाँ एफएफ 23 और क्रोम 28 के साथ विन 8 पीसी पर झूठी सकारात्मकता लौटाती हैं। क्या यह हमेशा ऐसा होता है या ऐसा इसलिए है क्योंकि मैंने एक बार इस कंप्यूटर से टच स्क्रीन जुड़ी है - शायद एफएफ और क्रोम स्थापित करने से पहले - लेकिन अब और नहीं? मेरे पास "टच इवेंट्स का अनुकरण" विकल्प सेट नहीं है।

— टाइफॉन

उह, यह हमेशा नए हार्डवेयर के साथ एक संघर्ष है। ब्राउज़रों को ओएस एब्स्ट्रेक्शन परतों के साथ काम करना पड़ता है ... जो हमेशा सब कुछ लागू नहीं करते हैं ... संक्षेप में, जेएस के साथ आपको ब्राउज़र पर भरोसा करना होगा :) कोई सार्वभौमिक तरीका नहीं है।

— ऐश

दोनों गैर-स्पर्श लैपटॉप पर उबंटू फ़ायरफ़ॉक्स पर वापस लौटते हैं।

— NoBugs 4

Answer 8

इसे मेरी एक साइट के लिए लिखा और शायद सबसे मूर्खतापूर्ण समाधान है। विशेष रूप से तब से, जब तक कि मॉर्डनिज्र को स्पर्श पहचान पर झूठी सकारात्मकता मिल सकती है।

यदि आप jQuery का उपयोग कर रहे हैं

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

या सिर्फ शुद्ध जेएस ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

Comments

हालांकि सावधान रहें: कम से कम आईपैड भी

— ऑनमूवर

धिक्कार है आपको Apple!

— तीमुथियुस पेरेज़

और विंडोज टैबलेट पर IE का उपयोग करने वाले लोग स्पर्श और माउस दोनों का उपयोग करना चाह सकते हैं।

— सेबजज

यह पोस्ट विंडोज टैबलेट के अस्तित्व में आने से पहले की गई थी।

— टिमोथी पेरेज़

@ s427 - फेकिंग आईई ... बस आईई 8 के लिए एक जांच करें। मुझे नहीं लगता कि <= IE8 के साथ कोई मोबाइल डिवाइस हैं।

— टिमोथी पेरेज़

Answer 9

मेरी पहली पोस्ट / टिप्पणी के लिए: हम सभी जानते हैं कि क्लिक करने से पहले 'टचस्टार्ट' शुरू हो जाता है। हम यह भी जानते हैं कि जब उपयोगकर्ता आपके पेज को खोलेगा तो वह: 1) माउस को स्थानांतरित करेगा 2) 3 क्लिक करें) स्क्रीन को स्क्रॉल करें (स्क्रॉल करने के लिए, या ... :))

आइए कुछ आज़माएँ:

// -> प्रारंभ: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <- अंत: jQuery

आपका दिन शुभ हो!

Answer 10

मैंने चर्चा में निम्नलिखित कोड का परीक्षण किया है

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

Android मोज़िला, क्रोम, ओपेरा, Android डिफ़ॉल्ट ब्राउज़र और iPhone पर सफारी पर काम करता है ... सभी सकारात्मक ...

मेरे लिए ठोस लगता है :)

Comments

सुपर सरल और मेरे लिए ठीक काम करता है। एंड्रॉइड (पुराने गैलेक्सी नोट) और एमुलेटर (क्रोम) पर और आईपैड पर परीक्षण किया गया।

— राल्फ

Chrome पर मेरे लिए गलत सकारात्मक रिटर्न देता है।

— जेम्स

Answer 11

विषय पर एक उपयोगी ब्लॉग पोस्ट, स्पर्श घटनाओं का पता लगाने के लिए माडर्निज़्र स्रोत के भीतर से जुड़ा हुआ है। निष्कर्ष: जावास्क्रिप्ट से टचस्क्रीन डिवाइसों का विश्वसनीय रूप से पता लगाना संभव नहीं है।

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

Answer 12

यह मेरे लिए काम करता है:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

Comments

आपने कितने प्लेटफ़ॉर्म, ब्राउन, OS ’, उपकरणों का परीक्षण किया है?

— बेर्गीरिनडेक

एफएफ, क्रोम, एंड्रॉइड और आईओएस (आईपैड) पर सफारी

— टर्टलट्रेल

काफी अच्छा लगा। मैंने सिर्फ डेस्कटॉप पर परीक्षण किया और बहुत सारे "अपरिभाषित" मिले, जो आईएफ संरचना को थोड़ा हैक कर देता है। यदि आप अपने रिटर्न वैल्यू को थोड़ा कम करते हैं, तो इस तरह से: रिटर्न सही == ("ontouchstart" विंडो में || window.DocumentTouch && document instof DocumentTouch); फिर आपके पास सही या गलत है :-)

— BerggreenDK

क्रोम में, "ontouchstart" विंडो में टच स्क्रीन के बिना मेरे पीसी पर सच है, इसलिए यह काम नहीं करता है। जैसा कि पहले टिप्पणी की गई थी, यह परीक्षण यदि ब्राउज़र स्पर्श-सक्षम है। इसके अलावा, सच == कुछ भी नहीं करता है और छोड़ दिया जाना चाहिए।

— राकेंसी

जब मैं क्रोम में निर्मित एमुलेटर के साथ यह कोशिश करता हूं, तो यह स्पर्श का पता लगाएगा जब इसे एमुलेटर में स्विच किया जाता है, और स्विच बंद होने पर स्पर्श का पता नहीं लगाएगा। इसलिए मेरे लिए ठीक काम करता है। लेकिन: मैं प्रसाद (नीचे) द्वारा लघु संस्करण का उपयोग करता हूं जो उपयोग नहीं करता है || Turtletrail के कोड में। और: मुझे परवाह नहीं है अगर यह 100% उपकरणों के लिए काम करता है। 99% मेरे लिए करेंगे।

— राल्फ

Answer 13

यदि आप मॉडर्निज़्र का उपयोग करते हैं , तो Modernizr.touchपहले बताए अनुसार उपयोग करना बहुत आसान है ।

हालांकि, मैं के संयोजन का उपयोग करना पसंद करता हूं Modernizr.touch सुरक्षित होने के लिए और उपयोगकर्ता एजेंट परीक्षण के ।

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

यदि आप मॉडर्निज़्र का उपयोग नहीं करते हैं, तो आप बस इसे बदल सकते हैं Modernizr.touch ऊपर दिए फ़ंक्शन को('ontouchstart' in document.documentElement)

उपयोगकर्ता एजेंट का परीक्षण करने पर भी ध्यान दें iemobile आपको पता चला Microsoft मोबाइल उपकरणों की व्यापक रेंज मिल जाएगीWindows Phone ।

इस SO प्रश्न को भी देखें

Comments

क्या अब 4 प्रश्नों के लिए एक ही प्रतिक्रिया है ... और यह उस प्रश्न का हल नहीं है जो वह पूछ रहा है।

— jycr753

मेरा मानना ​​है कि यह यहाँ प्रश्न का उत्तर देता है

— पीटर-पैन

यह उत्तर नहीं है, लेकिन यह एक संकेत है, जिसके लिए मैं यह जानना चाहता हूं कि कौन व्यक्ति यह पता लगाना चाहता है कि डिवाइस उपयोगकर्ता को छूने से पहले स्पर्श करने योग्य है या नहीं

— शहादत हुसैन खान

Answer 14

JQuery मोबाइल में आप बस कर सकते हैं:

$.support.touch

न जाने क्यों यह इतना अनिर्दिष्ट है .. लेकिन यह क्रॉसबोवर सेफ़ (वर्तमान ब्राउज़र के नवीनतम 2 संस्करण) सुरक्षित है।

Answer 15

जैसा कि पहले ही उल्लेख किया गया है, एक उपकरण माउस और टच इनपुट दोनों का समर्थन कर सकता है। बहुत बार, सवाल "क्या समर्थित है" नहीं है, लेकिन "वर्तमान में उपयोग किया जाता है"।

इस स्थिति के लिए, आप बस माउस ईवेंट (होवर श्रोता सहित) और ईवेंट को एक जैसे स्पर्श कर सकते हैं।

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

उपयोगकर्ता इनपुट के आधार पर जावास्क्रिप्ट को स्वचालित रूप से सही श्रोता को कॉल करना चाहिए। तो, एक स्पर्श घटना के मामले में,onTouchStartCallback , अपने होवर कोड का अनुकरण करते हुए निकाल दिया जाएगा।

ध्यान दें कि एक स्पर्श दोनों प्रकार के श्रोताओं, स्पर्श और माउस को आग लगा सकता है। हालाँकि, टच श्रोता पहले जाता है और बाद के माउस श्रोताओं को कॉल करके फायरिंग से बचा सकता है event.preventDefault()।

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

आगे यहां पढ़ रहे हैं ।

Answer 16

IPad के विकास के लिए मैं उपयोग कर रहा हूँ:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

मैं तब चुनिंदा रूप से स्पर्श आधारित घटनाओं (जैसे ontouchstart) या माउस आधारित घटनाओं (जैसे onmousedown) से जुड़ सकता हूं। मैंने अभी तक Android पर परीक्षण नहीं किया है।

Comments

यह ओपेरा मोबाइल 10 या इंटरनेट एक्सप्लोरर मोबाइल 6 (विंडोज मोबाइल 6.5) के साथ काम नहीं करता है।

— डबल जे

खराब क्रॉसब्रोसर / क्रॉस ओएस / क्रॉस प्लेटफॉर्म सलाह।

— बेरग्रीनडीके