यह पता लगाना कि ब्राउज़र में कोई माउस नहीं है और केवल स्पर्श है

149

मैं स्पर्श के लिए एक बहुत ही अलग इंटरफ़ेस के साथ एक वेबएप (रोचक वेबसाइट के पन्नों वाली वेबसाइट नहीं) विकसित कर रहा हूं (आपकी उंगली स्क्रीन को छुपाती है जब आप क्लिक करते हैं) और माउस (हॉवर पूर्वावलोकन पर बहुत निर्भर करता है)। मैं कैसे पता लगा सकता हूं कि मेरे उपयोगकर्ता के पास उसे सही इंटरफ़ेस प्रस्तुत करने के लिए कोई माउस नहीं है? मैं माउस और स्पर्श (जैसे कुछ नोटबुक) दोनों के साथ लोगों के लिए एक स्विच छोड़ने की योजना बना रहा हूं।

ब्राउज़र में टच इवेंट की क्षमता वास्तव में इसका मतलब यह नहीं है कि उपयोगकर्ता एक टच डिवाइस का उपयोग कर रहा है (उदाहरण के लिए, मॉडर्निज़र इसे काटता नहीं है)। कोड जो सही तरीके से प्रश्न का उत्तर देता है, यदि डिवाइस में माउस है, तो यह गलत है। माउस और स्पर्श वाले उपकरणों के लिए, इसे गलत लौटना चाहिए (केवल स्पर्श नहीं)

साइड नोट के रूप में, मेरा टच इंटरफ़ेस कीबोर्ड-ओनली डिवाइसेस के लिए भी उपयुक्त हो सकता है, इसलिए यह माउस की कमी है जिसका मैं पता लगा रहा हूँ।

आवश्यकता को और अधिक स्पष्ट करने के लिए, यहां वह एपीआई है जिसे मैं लागू करना चाहता हूं:

// Level 1


// The current answers provide a way to do that.
hasTouch();

// Returns true if a mouse is expected.
// Note: as explained by the OP, this is not !hasTouch()
// I don't think we have this in the answers already, that why I offer a bounty
hasMouse();

// Level 2 (I don't think it's possible, but maybe I'm wrong, so why not asking)

// callback is called when the result of "hasTouch()" changes.
listenHasTouchChanges(callback);

// callback is called when the result of "hasMouse()" changes.
listenHasMouseChanges(callback);
javascript  html  touch  mouse 
— nraynaud
स्रोत
2
— केविन रीड
मुझे लगता है कि आपको अपने डिज़ाइन पर पुनर्विचार करने की आवश्यकता है यदि आप चाहते हैं कि एक ऐप डेस्कटॉप और मोबाइल / टच दोनों पर लागू हो लेकिन प्रत्येक के लिए अलग-अलग व्यवहार हों। मुझे नहीं लगता कि इस बिंदु पर वास्तव में आप क्या कर रहे हैं, क्योंकि "जावास्क्रिप्ट डिटेक्ट माउस" के लिए Google पर त्वरित खोज माउस के विभिन्न राज्यों का पता लगाने के लिए quirksmode.org पर एक मामूली उपयोगी पोस्ट दिखाती है (क्लिक, स्थिति,) आदि), लेकिन ZERO का परिणाम है कि माउस वास्तव में मौजूद है या नहीं।
— davethegr8
24
शायद ऐसा इसलिए है क्योंकि Google ने मेरी मदद नहीं की थी कि मैंने इसे यहाँ पूछा।
— nraynaud
2
क्या आपने jquery से डॉक्यूमेंट माउसटर को आज़माया है? $ (दस्तावेज़) .mouseenter (फ़ंक्शन (ई) {चेतावनी ("माउस");});
— पराग गज्जर
4
लगभग एक दर्जन आशाजनक संकेतों पर विचार करने के बाद केवल एक मिनट के भीतर हर एक को अस्वीकार करने के लिए, यह सवाल मुझे काफी शानदार ढंग से चला रहा है।
— जॉर्डन ग्रे

जवाबों:

65

मुख्य समस्या यह है कि आपके पास उपकरणों / उपयोग के मामलों के विभिन्न वर्ग हैं:

  1. माउस और कीबोर्ड (डेस्कटॉप)
  2. केवल स्पर्श करें (फ़ोन / टैबलेट)
  3. माउस, कीबोर्ड और टच (टच लैपटॉप)
  4. स्पर्श और कीबोर्ड (टेबलेट पर ब्लूटूथ कीबोर्ड)
  5. केवल माउस (अक्षम उपयोगकर्ता / ब्राउज़िंग प्राथमिकता)
  6. केवल कीबोर्ड (अक्षम उपयोगकर्ता / ब्राउज़िंग प्राथमिकता)
  7. टच एंड माउस (यानी गैलेक्सी नोट 2 पेन से होवर इवेंट्स)

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

आप यह मानने में सही हैं कि ब्राउज़र में इवेंट कंस्ट्रक्टर्स की उपस्थिति आगे बढ़ने का एक अच्छा तरीका नहीं है (और यह कुछ हद तक असंगत है)। इसके अतिरिक्त, जब तक कि आप बहुत विशिष्ट घटना पर नज़र नहीं रख रहे हैं या केवल ऊपर की कुछ कक्षाओं को नियंत्रित करने की कोशिश कर रहे हैं, घटनाओं का उपयोग करते हुए स्वयं पूर्ण प्रमाण नहीं है।

उदाहरण के लिए, मान लें कि आपने खोज लिया है कि किसी उपयोगकर्ता ने एक वास्तविक मूसमोव (स्पर्श घटनाओं से असत्य नहीं है, http://www.html5rocks.com/en/mobile/touchandmouse/ ) देखें ।

फिर क्या?

आप हॉवर शैलियों को सक्षम करते हैं? आप और बटन जोड़ते हैं?

किसी भी तरह से आप कांच के लिए समय बढ़ा रहे हैं क्योंकि आपको आग लगने की घटना का इंतजार करना होगा।

लेकिन तब क्या होता है जब आपका कुलीन उपयोगकर्ता अपने माउस को अनप्लग करना चाहता है और पूरा स्पर्श करना चाहता है .. क्या आप उसके लिए इंतजार कर रहे हैं कि वह आपके अब क्रैम्प्ड इंटरफ़ेस को छू ले, फिर उसे सही करने के बाद अपने भीड़ भरे यूआई को इंगित करने का प्रयास करें?

बुलेट फॉर्म में, स्टुगॉक्स को https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101 पर उद्धृत करें

  • हम एक माउस की उपस्थिति का पता लगाना चाहते हैं
  • किसी घटना को निकाल दिए जाने से पहले Ae शायद पता नहीं लगा सकता
  • जैसे, हम जो पता लगा रहे हैं, अगर इस सत्र में एक माउस का उपयोग किया गया है - यह पृष्ठ लोड से तुरंत नहीं होगा
  • हम शायद यह भी पता नहीं लगा सकते हैं कि कोई माउस नहीं है - यह तब तक अपरिभाषित होगा जब तक कि यह सच न हो (मुझे लगता है कि यह गलत साबित होने से ज्यादा मायने रखता है)
  • और हम शायद यह नहीं पता लगा सकते हैं कि एक माउस मध्य-सत्र डिस्कनेक्ट हो गया है - जो उपयोगकर्ता से केवल अपने माउस के साथ देने से अप्रभेद्य होगा

एक तरफ: ब्राउज़र जानता है कि जब कोई उपयोगकर्ता माउस में प्लग करता है / कीबोर्ड से कनेक्ट होता है, लेकिन यह जावास्क्रिप्ट के लिए उजागर नहीं करता है .. डेंजर!

यह आपको निम्नलिखित के लिए ले जाना चाहिए:

किसी दिए गए उपयोगकर्ता की वर्तमान क्षमताओं को ट्रैक करना जटिल, अविश्वसनीय और संदिग्ध योग्यता है

प्रगतिशील वृद्धि का विचार यहाँ पर काफी अच्छी तरह से लागू होता है। एक ऐसा अनुभव बनाएं जो उपयोगकर्ता के संदर्भ में आसानी से काम करे। फिर कार्यक्षमता जोड़ने के लिए ब्राउज़र सुविधाओं / मीडिया प्रश्नों के आधार पर धारणाएं बनाएं जो ग्रहण किए गए संदर्भ में सापेक्ष होंगे। एक माउस की उपस्थिति कई तरीकों में से एक है जिसमें विभिन्न उपकरणों पर विभिन्न उपयोगकर्ता आपकी वेबसाइट का अनुभव करते हैं। इसके कर्नेल में योग्यता के साथ कुछ बनाएं और लोगों को बटन क्लिक करने के बारे में बहुत चिंता न करें।

— व्याट
स्रोत
3
बहुत बढ़िया जवाब। उम्मीद है, उपयोगकर्ता हमेशा एक स्क्रीन है! मुझे लगता है कि यह एक इंटरफेस बनाने के लिए समझ में आता है जहां उपयोगकर्ता के वर्तमान इंटरैक्शन मोड के लिए अन्याय होता है। एक टच लैपटॉप पर, :hoverजब उपयोगकर्ता माउस से स्पर्श करने के लिए स्विच करता है, तो ऐप (यानी उस तरह के तत्व और चीजें) को समायोजित करने के लिए समझ में आता है । ऐसा प्रतीत नहीं होता है कि उपयोगकर्ता वर्तमान में ठीक उसी समय माउस + टच का उपयोग कर रहा है (मेरा मतलब है कि यह एक ही कंप्यूटर हाहा से जुड़े 2 पति-पत्नी की तरह है)
— सेबस्टियन लॉबर
@SebastienLorber - इसे आप से तोड़ने के लिए नफरत है, लेकिन उपयोगकर्ताओं को हमेशा एक स्क्रीन नहीं है। ( क्या एक स्क्रीन रीडर एक उपयोगकर्ता मशीन पर चल रहा है या नहीं, इसका पता लगाने के लिए जावास्क्रिप्ट का उपयोग करना संभव है? )
— ashleedawg
57

कैसे दस्तावेज़ पर एक मूसमोव घटना के लिए सुनने के बारे में। तब तक जब तक आप उस घटना को नहीं सुन लेते, आप मान लेते हैं कि उपकरण स्पर्श या कीबोर्ड है।

var mouseDetected = false;
function onMouseMove(e) {
  unlisten('mousemove', onMouseMove, false);
  mouseDetected = true;
  // initializeMouseBehavior();
}
listen('mousemove', onMouseMove, false);

(कहाँ listenऔर unlistenके लिए प्रतिनिधि addEventListenerया attachEventउचित रूप में।)

उम्मीद है कि यह बहुत अधिक दृश्य jank के लिए नेतृत्व नहीं करेगा, यह चूसना होगा यदि आपको मोड के आधार पर बड़े पैमाने पर फिर से लेआउट की आवश्यकता हो ...

— सज्जन
स्रोत
2
यह एक अच्छा विचार है, लेकिन दुर्भाग्य से प्रतिक्रिया में देरी इसे अनुपयोगी बना देगी जब एप्लिकेशन का UI इस बात पर निर्भर करता है कि क्या एक माउस उपलब्ध है .. यह विशेष रूप से सच है यदि आवेदन iframed हो सकता है, तो माउस इवेंट केवल तभी हिट करेगा यदि माउस आइफ्रेम पर ही चलता है ..
— जॉन ग्जेंग्सेट
7
यह काम कर सकता है यदि एप्लिकेशन स्प्लैश स्क्रीन और "जारी रखें" बटन के साथ शुरू होता है। यदि माउस पहले मूसडाउन इवेंट से पहले चलता है तो आपके पास एक माउस है। यह केवल तभी विफल होगा जब बटन सीधे माउस के नीचे लोड हो और उपयोगकर्ता का बहुत स्थिर हाथ हो (यहां तक ​​कि 1 पिक्सेल को भी उठाया जाना चाहिए)।
— SpliFF
49
अच्छा विचार है, लेकिन हमारे परीक्षण में काम नहीं करता है । आईपैड इस घटना को ट्रिगर करते हैं।
— जेफ एटवुड
3
@JeffAtwood आपने अपने मामले में क्या किया?
— माइकल हरेन
2
आईपैड निश्चित रूप से मूसमव इवेंट को ट्रिगर करते हैं, मूसडाउन इवेंट से ठीक पहले। मैंने पाया है कि मूसडाउन काउंट> 0 और मूसडाउन काउंट == माउसमोव काउंट नो माउस का पता लगाने का एक अच्छा तरीका है। मैं असली माउस के साथ इसकी नकल नहीं कर सकता।
— पीटर वूस्टर
36

2018 तक यह पता लगाने का एक अच्छा और विश्वसनीय तरीका है कि क्या ब्राउज़र में माउस (या समान इनपुट डिवाइस) है: CSS4 मीडिया इंटरैक्शन सुविधाएँ जो अब लगभग किसी भी आधुनिक ब्राउज़र (IE 11 और विशेष मोबाइल ब्राउज़र को छोड़कर) द्वारा समर्थित हैं।

W3C:

पॉइंटर मीडिया फीचर का इस्तेमाल माउस जैसे पॉइंटिंग डिवाइस की मौजूदगी और सटीकता को क्वेरी करने के लिए किया जाता है।

निम्नलिखित विकल्प देखें:

    /* The primary input mechanism of the device includes a 
pointing device of limited accuracy. */
    @media (pointer: coarse) { ... }

    /* The primary input mechanism of the device 
includes an accurate pointing device. */
    @media (pointer: fine) { ... }

    /* The primary input mechanism of the 
device does not include a pointing device. */
    @media (pointer: none) { ... }

    /* Primary input mechanism system can 
       hover over elements with ease */
    @media (hover: hover) { ... }

    /* Primary input mechanism cannot hover 
       at all or cannot conveniently hover 
       (e.g., many mobile devices emulate hovering
       when the user performs an inconvenient long tap), 
       or there is no primary pointing input mechanism */
    @media (hover: none) { ... }

    /* One or more available input mechanism(s) 
       can hover over elements with ease */
    @media (any-hover: hover) { ... }


    /* One or more available input mechanism(s) cannot 
       hover (or there are no pointing input mechanisms) */
    @media (any-hover: none) { ... }

जेएस में मीडिया प्रश्नों का भी उपयोग किया जा सकता है:

if(window.matchMedia("(any-hover: none)").matches) {
    // do sth
}

सम्बंधित:

डब्ल्यू 3 प्रलेखन: https://www.w3.org/TR/mediaqueries-4/#mf-interaction

ब्राउज़र समर्थन: https://caniuse.com/#search=media%20features

इसी तरह की समस्या: पता लगाएँ कि क्या क्लाइंट डिवाइस का समर्थन करता है: होवर और: फोकस स्टेट्स

— Blackbam
स्रोत
मुझे व्यक्तिगत रूप से यह उत्तर पसंद है लेकिन अब (10/19) के अनुसार, @media होवर और पॉइंटर CSS प्रश्न caniuse.com के अनुसार दुनिया भर में केवल 85% डिवाइसों पर उपलब्ध हैं। निश्चित रूप से बुरा नहीं है, 95% या उससे अधिक बेहतर है। उम्मीद है कि यह जल्द ही उपकरणों पर मानक बन जाएगा।
— MQuiggGeorgia
1
@MQuiggGeorgia मूल रूप से मैं मूल रूप से आपकी आलोचना से सहमत हूं, यह अभी तक हर जगह समर्थित नहीं है। फिर भी मेरे लिए caniuse.com का कहना है कि यह 91.2% ( caniuse.com/#feat=css-media-interaction ) समर्थित है । आईई 11 को छोड़कर और मोबाइल पर विशेष चपटा ब्राउज़र को छोड़कर हर जगह इसे करीब से देखा जाता है। निष्पक्ष होना किसी भी आधुनिक सुविधा के लिए सही है, क्योंकि Microsoft ने IE सुविधाओं को लागू करना बंद कर दिया था। IE 11 के लिए आप यहां अन्य उत्तरों से कमबैक का उपयोग कर सकते हैं।
— ब्लैकबैम
23

@ व्याट का जवाब बहुत अच्छा है और हमें सोचने के लिए बहुत कुछ देता है।

मेरे मामले में, मैंने पहली बातचीत को सुनने के लिए चुना, केवल तभी एक व्यवहार निर्धारित किया। इसलिए, भले ही उपयोगकर्ता के पास एक माउस हो, मैं टच डिवाइस के रूप में व्यवहार करूंगा यदि पहली बातचीत एक स्पर्श थी।

दिए गए क्रम को ध्यान में रखते हुए, जिसमें घटनाओं को संसाधित किया जाता है :

  1. touchstart
  2. touchmove
  3. touchend
  4. ऊपर टहलना
  5. MouseMove
  6. माउस नीचे
  7. mouseup
  8. क्लिक

हम मान सकते हैं कि यदि स्पर्श से पहले माउस घटना शुरू हो जाती है, तो यह एक वास्तविक माउस घटना है, एक अनुकरण नहीं। उदाहरण (jQuery का उपयोग करके):

$(document).ready(function() {
    var $body = $('body');
    var detectMouse = function(e){
        if (e.type === 'mousedown') {
            alert('Mouse interaction!');
        }
        else if (e.type === 'touchstart') {
            alert('Touch interaction!');
        }
        // remove event bindings, so it only runs once
        $body.off('mousedown touchstart', detectMouse);
    }
    // attach both events to body
    $body.on('mousedown touchstart', detectMouse);
});

मेरे लिए यही काम किया

— ह्यूगो सिल्वा
स्रोत
मेरे लिए काम नहीं करता, Ipad सफारी (IOS8.3) भी इस स्निपेट के साथ एक माउस का पता लगाता है
— netzaffin
3
@netzaffin। प्रतिक्रिया के लिए धन्यवाद, मैंने इसे माउसओवर के बजाय मूसडाउन का उपयोग करके अधिक सुसंगत पाया। क्या आप अपने आईओएस से इस फिडेल पर एक नज़र डालेंगे और मुझे इसका परिणाम बताएंगे? चीयर्स jsfiddle.net/bkwb0qen/15/embedded/result
— ह्यूगो सिल्वा
1
यदि आपके पास माउस के साथ एक टचस्क्रीन है, तो केवल पहले इस्तेमाल की जाने वाली इनपुट विधि का पता लगाया जाएगा।
— 0xcaff
11

केवल यह पता लगाना संभव है कि कोई ब्राउज़र स्पर्श योग्य है या नहीं । यह जानने का कोई तरीका नहीं है कि क्या वास्तव में एक टच स्क्रीन या एक माउस जुड़ा हुआ है।

यदि स्पर्श क्षमता का पता लगाया जाता है तो माउस घटना के बजाय स्पर्श घटना को सुनकर उपयोग को प्राथमिकता दे सकता है।

स्पर्श क्षमता क्रॉस-ब्राउज़र का पता लगाने के लिए:

function hasTouch() {
    return (('ontouchstart' in window) ||       // html5 browsers
            (navigator.maxTouchPoints > 0) ||   // future IE
            (navigator.msMaxTouchPoints > 0));  // current IE10
}

फिर एक व्यक्ति इसका उपयोग कर सकता है:

if (!hasTouch()) alert('Sorry, need touch!);

या चुनने के लिए कौन सी घटना को सुनना है:

var eventName = hasTouch() ? 'touchend' : 'click';
someElement.addEventListener(eventName , handlerFunction, false);

या स्पर्श बनाम गैर-स्पर्श के लिए अलग-अलग तरीकों का उपयोग करें:

if (hasTouch() === true) {
    someElement.addEventListener('touchend' , touchHandler, false);

} else {
    someElement.addEventListener('click' , mouseHandler, false);

}
function touchHandler(e) {
    /// stop event somehow
    e.stopPropagation();
    e.preventDefault();
    window.event.cancelBubble = true;
    // ...
    return false; // :-)
}
function mouseHandler(e) {
    // sorry, touch only - or - do something useful and non-restrictive for user
}

माउस के लिए कोई केवल तभी पता लगा सकता है कि माउस का उपयोग किया जा रहा है, यदि यह मौजूद है या नहीं। एक वैश्विक ध्वज को इंगित करने के लिए सेटअप कर सकता है कि माउस का उपयोग करके पता लगाया गया था (एक मौजूदा उत्तर के समान, लेकिन थोड़ा सा सरल):

var hasMouse = false;

window.onmousemove = function() {
    hasMouse = true;
}

(किसी को शामिल नहीं किया जा सकता है mouseupया mousedownइन घटनाओं को स्पर्श से भी ट्रिगर किया जा सकता है)

ब्राउज़र निम्न-स्तरीय सिस्टम API तक पहुंच को प्रतिबंधित करता है, जिसे उस सिस्टम की हार्डवेयर क्षमताओं जैसे सुविधाओं का पता लगाने में सक्षम होने की आवश्यकता होती है।

संभवतः इन तक पहुंचने के लिए एक प्लगइन / विस्तार लिखने की संभावना है लेकिन जावास्क्रिप्ट और डोम के माध्यम से इस तरह की पहचान इस उद्देश्य के लिए सीमित है और किसी को विभिन्न ओएस प्लेटफार्मों के लिए एक प्लगइन विशिष्ट लिखना होगा।

इसलिए निष्कर्ष में: ऐसी पहचान का अनुमान केवल "अच्छे अनुमान" से लगाया जा सकता है।

8

जब मीडिया क्वेरी स्तर 4 ब्राउज़र में उपलब्ध है, तो हम माउस के साथ उपकरणों का पता लगाने के लिए "पॉइंटर" और "होवर" प्रश्नों का उपयोग करने में सक्षम होंगे।

यदि हम वास्तव में उस जानकारी को जावास्क्रिप्ट के साथ संवाद करना चाहते हैं, तो हम डिवाइस शैली के अनुसार विशिष्ट शैलियों को सेट करने के लिए CSS क्वेरी का उपयोग कर सकते हैं, और फिर getComputedStyleउस शैली को पढ़ने के लिए जावास्क्रिप्ट में उपयोग कर सकते हैं, और मूल डिवाइस प्रकार को इससे प्राप्त कर सकते हैं।

लेकिन एक माउस किसी भी समय कनेक्ट या अनप्लग हो सकता है, और उपयोगकर्ता स्पर्श और माउस के बीच स्विच करना चाह सकता है। इसलिए हमें इस परिवर्तन का पता लगाने की आवश्यकता है , और इंटरफ़ेस बदलने या स्वचालित रूप से ऐसा करने की पेशकश की जा सकती है।

— joeytwiddle
स्रोत
1
विशेष रूप से, any-pointerऔरany-hover आपको सभी लागू डिवाइस क्षमताओं की जांच करने देगा। भविष्य में हम इस समस्या को कैसे हल कर सकते हैं, इस पर एक नज़र डालकर अच्छा लगा! :)
— जॉर्डन ग्रे
2
window.matchMedia ("(कोई-पॉइंटर: मोटे)")। मैच === सच?
— 4esn0k
7

चूंकि आप वैसे भी इंटरफेस के बीच स्विच करने का एक तरीका पेश करने की योजना बना रहे हैं, क्या उपयोगकर्ता को एप्लिकेशन के सही संस्करण को "एंटर" करने के लिए लिंक या बटन पर क्लिक करने के लिए कहा जा सकता है? तब आप भविष्य की यात्राओं के लिए उनकी प्राथमिकता को याद कर सकते हैं। यह उच्च तकनीक नहीं है, लेकिन यह 100% विश्वसनीय है :-)

— Brandan
स्रोत
2
यह वास्तव में एक बहुत अच्छा सुझाव है, लेकिन यह उपयोगकर्ता के वास्तविक इंटरफ़ेस पर पहुंचने से पहले के समय में देरी करता है। इसके अलावा, मुझे प्रारंभिक पसंद के बाद स्विच करने का एक तरीका प्रदान करना होगा। अंत में यह पता लगाया जा सकता है की तुलना में अधिक काम किया जा रहा है ..
— जॉन Gjengset
1
उपयोगकर्ता से पूछना स्पष्ट रूप से सबसे अच्छा तरीका है - यदि हमेशा मूर्खतापूर्ण नहीं है - और आपको अपग्रेड-नोटिफिकेशन डालने के लिए एक सुविधाजनक स्थान देता है और क्या नहीं। मुझे लगता है कि आप "समस्या" पर विचार कर रहे हैं ..
— T4NK3R
4

@SamuelRossille कोई ब्राउज़र नहीं जो दुर्भाग्य से एक माउस के अस्तित्व (या उसके अभाव) को उजागर करने से अवगत है।

इसलिए, कहा जा रहा है, हमें बस अपने मौजूदा विकल्प ... घटनाओं के साथ सबसे अच्छा प्रयास करना होगा। मुझे पता है कि यह वास्तव में वह नहीं है जो आप खोज रहे हैं ... सहमत हैं कि यह वर्तमान में आदर्श से बहुत दूर है।

हम यह पता लगाने के लिए अपनी पूरी कोशिश कर सकते हैं कि उपयोगकर्ता किसी भी समय माउस का उपयोग कर रहा है या नहीं। यहाँ jQuery और नॉकआउट का उपयोग करके एक त्वरित और गंदा उदाहरण दिया गया है:

//namespace
window.ns = {};

// for starters, we'll briefly assume if touch exists, they are using it - default behavior
ns.usingTouch = ko.observable(Modernizr.touch); //using Modernizr here for brevity.  Substitute any touch detection method you desire

// now, let's sort out the mouse
ns.usingMouse = ko.computed(function () {
    //touch
    if (ns.usingTouch()) {
        //first, kill the base mousemove event
        //I really wish browsers would stop trying to handle this within touch events in the first place
        window.document.body.addEventListener('mousemove', function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }, true);

        //remove mouse class from body
        $('body').removeClass("mouse");

        //switch off touch listener
        $(document).off(".ns-touch");

        // switch on a mouse listener
        $(document).on('mousemove.ns-mouse', function (e) {
            if (Math.abs(window.lastX - e.clientX) > 0 || window.lastY !== e.clientY) {
                ns.usingTouch(false);  //this will trigger re-evaluation of ns.usingMouse() and result in ns.usingMouse() === true
            }
        });

        return false;
    }
    //mouse
    else {
        //add mouse class to body for styling
        $('body').addClass("mouse");

        //switch off mouse listener
        $(document).off(".ns-mouse");

        //switch on a touch listener
        $(document).on('touchstart.ns-touch', function () { ns.usingTouch(true) });

        return true;
    }
});

//tests:
//ns.usingMouse()
//$('body').hasClass('mouse');

अब आप कर सकते हैं बाँध / usingMouse () की सदस्यता और usingTouch () और / या शैली के साथ अपने इंटरफेस body.mouse वर्ग। जैसे ही माउस कर्सर का पता चलता है और टचस्टार्ट पर जैसे ही इंटरफ़ेस आगे और पीछे जाएगा।

उम्मीद है कि जल्द ही हम ब्राउज़र विक्रेताओं से कुछ बेहतर विकल्प प्राप्त करेंगे।

— रिवे डेयरडेव
स्रोत
2

Tera-WURFL आपको उस डिवाइस की क्षमताओं को बता सकता है जो आपके डेटाबेस पर जाकर अपने डेटाबेस के विरुद्ध ब्राउज़र हस्ताक्षर की तुलना कर रहा है । इसे एक रूप दें, इसका नि: शुल्क!

— गीगी
स्रोत
1
यह उन डिवाइसों के लिए काम नहीं करेगा जिनमें टच स्क्रीन और माउस हो सकते हैं या नहीं हो सकते हैं। उदाहरण के लिए, एक डेस्कटॉप विंडोज कंप्यूटर एक टच स्क्रीन से जुड़ा हो सकता है, लेकिन आमतौर पर एक माउस भी होगा, जबकि एक टैबलेट विंडोज भी चला रहा हो सकता है, लेकिन एक माउस कनेक्ट नहीं हो सकता है ..
— जॉन गेंजेंगट
@ जोंहो बस मान लें कि डेस्कटॉप ऑपरेटिंग सिस्टम में एक माउस जुड़ा हुआ है। आखिरकार, उन्हें सॉफ़्टवेयर की एक विस्तृत श्रृंखला का समर्थन करना चाहिए जो कि टचस्क्रीन को ध्यान में रखते हुए विकसित नहीं किया गया था।
— गीगी
1
सादा विंडोज 8 चलाने वाली गोलियों के बारे में क्या? या लिनक्स? या एंड्रॉइड चलाने वाले लैपटॉप?
— जॉन गेंजेंगसेट
2
@ जानू स्पष्ट रूप से यह दृष्टिकोण इष्टतम से कम है, लेकिन यह जानने के लिए कोई पोर्टेबल तरीका नहीं है (अभी तक)। यदि कोई एंड्रॉइड के साथ एक लैपटॉप चला रहा है, तो बस मान लें कि यह स्पर्श करने योग्य है। यदि कोई Windows8 टैबलेट चला रहा है, तो मान लें कि यह माउस-सक्षम है (ओएस को गैर-स्पर्श कार्यक्रमों के लिए माउस का अनुकरण करना चाहिए)।
— गिगी
यह अब इतना पुराना हो गया है कि यह अब प्रासंगिक नहीं है।
— इंजीनियर
2

यदि आप यह पहचानने की क्षमता नहीं रखते हैं कि इसमें स्पर्श करने और / या माउस के मूवमेंट पर प्रतिक्रिया करने की क्षमता क्यों है?

// This will also return false on
// touch-enabled browsers like Chrome
function has_touch() {
  return !!('ontouchstart' in window);
}

function has_mouse() {
  return !!('onmousemove' in window);
}
— iBlue
स्रोत
4
क्योंकि कुछ ब्राउज़र (उदाहरण के लिए IE9) रिपोर्ट करते हैं कि फ़ंक्शन मौजूद है, भले ही यह कभी ट्रिगर न हो। मेरा मानना ​​है कि यह "सही" व्यवहार भी है।
— जॉन ग्जेंग्सेट
आप एक फ़ंक्शन का उपयोग क्यों करेंगे? बस has_touch = 'ontouchstart' in windowपर्याप्त होगा, और इसी तरह।
— विस्कॉन्सिन
खैर, यह कम से कम ओएस एक्स के लिए क्रोम 47 पर काम करता है। कोई ontouchstart रिपोर्टिंग।
— फ्राकेहेड
2

यह मेरे लिए एक समान स्थिति में काम करता था। मूल रूप से, मान लें कि उपयोगकर्ता के पास माउस तब तक नहीं है जब तक कि आप लगातार मूसडाउन या माउसअप के बिना लगातार मूसमव की एक छोटी श्रृंखला नहीं देखते हैं। बहुत सुरुचिपूर्ण नहीं है, लेकिन यह काम करता है।

var mousedown = false;
var mousemovecount = 0;
function onMouseDown(e){
    mousemovecount = 0;
    mousedown = true;
}
function onMouseUp(e){
    mousedown = false;
    mousemovecount = 0;
}
function onMouseMove(e) {
    if(!mousedown) {
        mousemovecount++;
        if(mousemovecount > 5){
            window.removeEventListener('mousemove', onMouseMove, false);
            console.log("mouse moved");
            $('body').addClass('has-mouse');
        }
    } else {
        mousemovecount = 0;
    }
}
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
— माइकल कोंडोरिस
स्रोत
0

Modenizr पर एक नज़र है इसकी एक विशेषता स्पर्श है

http://modernizr.com/docs/#features-misc

जबकि मैंने पूरी तरह से परीक्षण नहीं किया है, यह बहुत अच्छी तरह से काम करता है

इसके अलावा यह आधुनिक पृष्ठ http://www.html5rocks.com/en/mobile/touchandmouse/ से जुड़ा हुआ है

— exussum
स्रोत
यह स्पर्श क्षमता का पता लगाने का प्रयास करता है, न कि केवल स्पर्श और कोई माउस क्षमता। यह प्रश्न स्पर्श पहचान से मौलिक रूप से भिन्न है।
— जिम्बो जॉनी
0

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

स्पर्श इवेंट और माउस ईवेंट अनन्य हैं। तो यह विभिन्न कार्यों को लेने में कुछ हद तक मदद कर सकता है। समस्या यह है कि टच इवेंट्स माउस अप / डाउन / मूव इवेंट्स के करीब हैं, और एक क्लिक ईवेंट को भी ट्रिगर करते हैं।

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

अगर ऐसा है तो आप कुछ हद तक आलसी दृष्टिकोण का पता लगा सकते हैं:

एक ऑनक्लिक घटना हमेशा एक माउस के साथ एक ऑनमूवर घटना से पहले होगी। तो ध्यान दें कि माउस उस तत्व के ऊपर है जिसे क्लिक किया गया है।

आप इसे दस्तावेज़-व्यापी ओनमुसमोव घटना के साथ कर सकते हैं। आप यह event.targetरिकॉर्ड करने के लिए उपयोग कर सकते हैं कि माउस किस तत्व पर स्थित है। फिर अपने ऑनक्लिक घटनाओं के अंदर आप यह देखने के लिए जांच कर सकते हैं कि माउस वास्तव में क्लिक किए जा रहे तत्व (या तत्व का बच्चा) पर है या नहीं।

वहां से आप या तो दोनों के लिए क्लिक इवेंट पर भरोसा कर सकते हैं और परिणाम के आधार पर ए या बी कार्रवाई कर सकते हैं। बी एक्शन कुछ भी नहीं हो सकता है अगर कुछ टच डिवाइस एक क्लिक ईवेंट का उत्सर्जन नहीं करते हैं (इसके बजाय आपको ऑनटॉक * ईवेंट पर भरोसा करना होगा)।

— ल्यूक
स्रोत
0

मुझे नहीं लगता कि टच-ओनली डिवाइस (मेरी जानकारी के लिए) की पहचान करना संभव है। मुख्य मुद्दा सभी माउस और कीबोर्ड घटनाओं को स्पर्श उपकरणों द्वारा भी निकाल दिया जाता है। निम्नलिखित उदाहरण देखें, दोनों अलर्ट स्पर्श उपकरणों के लिए सही हैं।

function is_touch_present() {
  return ('ontouchstart' in window) || ('onmsgesturechange' in window);
}

function is_mouse_present() {
  return (('onmousedown' in window) && ('onmouseup' in window) && ('onmousemove' in window) && ('onclick' in window) && ('ondblclick' in window) && ('onmousemove' in window) && ('onmouseover' in window) && ('onmouseout' in window) && ('oncontextmenu' in window));
}

alert("Touch Present: " + is_touch_present());
alert("Mouse Present: " + is_mouse_present());
— Bikas
स्रोत
2
सफारी रिटर्न ipad trueके लिए'onmousedown' in window
— vsync
0

मेरी राय में सबसे अच्छा विचार mousemoveश्रोता (वर्तमान में शीर्ष उत्तर) है। मेरा मानना ​​है कि इस विधि को थोड़ा मोड़ने की जरूरत है। यह सच है कि टच-आधारित ब्राउज़र मूसमोव इवेंट का भी अनुकरण करते हैं, जैसा कि आप इस iOS चर्चा में देख सकते हैं , इसलिए हमें थोड़ा सावधान रहना चाहिए।

यह समझ में आता है कि टच-आधारित ब्राउज़र केवल इस घटना का अनुकरण करेंगे जब उपयोगकर्ता स्क्रीन टैप करता है (उपयोगकर्ता की उंगली नीचे है)। इसका अर्थ है कि हमें अपने माउस हैंडलर के दौरान एक परीक्षण जोड़ना चाहिए कि घटना के दौरान कौन सा माउस बटन नीचे है (यदि कोई है)। यदि कोई माउस बटन नीचे नहीं है, तो हम सुरक्षित रूप से मान सकते हैं कि एक वास्तविक माउस मौजूद है। यदि एक माउस बटन नीचे है, तो परीक्षण अनिर्णायक रहता है।

तो इसे कैसे लागू किया जाएगा? यह प्रश्न दिखाता है कि माउस बटन के दौरान कौन सा माउस बटन नीचे है यह जांचने के लिए सबसे विश्वसनीय तरीका वास्तव में दस्तावेज़ स्तर में 3 घटनाओं के लिए सुनना है: मूसमव, मूसडाउन और माउसअप। ऊपर और नीचे केवल एक वैश्विक बूलियन ध्वज स्थापित किया जाएगा। चाल परीक्षण का प्रदर्शन करेगी। यदि आपके पास एक चाल है और बूलियन गलत है, तो हम मान सकते हैं कि एक माउस मौजूद है। सटीक कोड उदाहरणों के लिए प्रश्न देखें।

एक अंतिम टिप्पणी .. यह परीक्षण आदर्श नहीं है क्योंकि इसे लोड समय में नहीं किया जा सकता है। इसलिए, मैं पहले से सुझाए गए अनुसार प्रगतिशील वृद्धि पद्धति का उपयोग करूंगा। डिफ़ॉल्ट रूप से एक संस्करण दिखाते हैं जो माउस-विशिष्ट होवर इंटरफ़ेस का समर्थन नहीं करता है। यदि एक माउस खोजा गया है, तो जेएस का उपयोग करके रनटाइम में इस मोड को सक्षम करें। यह उपयोगकर्ता के लिए जितना संभव हो उतना सहज दिखाई देना चाहिए।

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

— talkol
स्रोत
अच्छे वर्कअराउंड सुझावों के लिए धन्यवाद ... मुझे लगता है कि मुख्य समस्या यह नहीं है कि मुझे इनमें से किसी एक का सहारा लेना
— पड़ेगा
दुर्भाग्य से mousemove एक ipad पर क्लिक करने पर चालू हो जाता है। केवल सिम्युलेटर के साथ परीक्षण किया गया। HasMouse के लिए () मैं उपयोग कर रहा था अगर (('विंडो में' ontouchstart)) सच लौटाओ; लेकिन स्पर्श समर्थित लैपटॉप के लिए काम नहीं करता है।
— क्रिस गनवार्डन
@ क्रिस जी - आईपैड नर्क ... (दीवार के खिलाफ मेरा सिर पीटना)
— विस्कॉन
0

विभिन्न पीसी, लिनक्स, आईफोन, एंड्रॉइड फोन और टैब पर कुछ परीक्षण चलाए। अजीब है कि कोई आसान बुलेट-प्रूफ समाधान नहीं है। समस्या तब उत्पन्न होती है जब कुछ के पास टच होता है और कोई माउस अभी भी टच और माउस ईवेंट को एप्लिकेशन में प्रस्तुत नहीं करता है। चूंकि वे केवल-माउस और केवल-स्पर्श इंस्टेंसेस का समर्थन करना चाहते हैं, दोनों को संसाधित करना चाहते हैं, लेकिन यह उपयोगकर्ता इंटरैक्शन की दोहरी घटनाओं का कारण बनता है। यदि पता चल सकता है कि माउस डिवाइस पर मौजूद नहीं है, तो नकली / सम्मिलित माउस घटनाओं को अनदेखा करने के लिए जान सकते हैं। यदि माउसमूव का सामना किया गया है, तो झंडे की कोशिश कर रहा है, लेकिन कुछ ब्राउज़र नकली माउसमूव के साथ-साथ माउसअप और माउसडाउन भी फेंक देते हैं। टाइमस्टैम्प की जांच करने की कोशिश की लेकिन यह बहुत जोखिम भरा था। नीचे पंक्ति: मुझे लगता है कि नकली माउस ईवेंट बनाने वाले ब्राउज़र हमेशा एक माउस माउस को सम्मिलित किए गए माउसडाउन से पहले डालते हैं। मेरे मामलों के 99.99% मामलों में, जब एक सिस्टम पर एक वास्तविक माउस होता है, तो लगातार कई माउसओम इवेंट होते हैं - कम से कम दो। इस प्रकार, इस बात का ध्यान रखें कि क्या सिस्टम लगातार दो माउसओम घटनाओं का सामना करता है और यह घोषणा करता है कि कोई माउस मौजूद नहीं है यदि यह स्थिति कभी पूरी नहीं होती है। यह शायद बहुत सरल है, लेकिन मेरे सभी परीक्षण सेटअप पर इसका काम कर रहा है। लगता है कि मैं इसके साथ तब तक चिपके रहूंगा, जब तक कि मुझे कोई बेहतर उपाय नहीं मिल जाता। - जिम डब्ल्यू

— jwasch
स्रोत
0

माउस के उपयोग का पता लगाने के लिए jQuery में एक सरल समाधान, जो उस समस्या को हल करता है जहां मोबाइल डिवाइस भी 'मूसमोव' घटना को ट्रिगर करते हैं। बस मूसमोव श्रोता को हटाने के लिए एक टचस्टार्ट श्रोता जोड़ें, ताकि यह स्पर्श पर ट्रिगर न हो।

$('body').one('touchstart.test', function(e) {
  // Remove the mousemove listener for touch devices
  $('body').off('mousemove.test');
}).one('mousemove.test', function(e) {
  // MOUSE!
});

बेशक, डिवाइस अभी भी टच और माउस हो सकता है, लेकिन ऊपर यह गारंटी देगा कि एक वास्तविक माउस का उपयोग किया गया था।

— suncat100
स्रोत
0

बस एक उपाय है जो मुझे लगता है कि काफी सुरुचिपूर्ण है।

// flag as mouse interaction by default
var isMouse = true;

// detect a touch event start and flag it
$(window).on('touchstart', function () {
  // if triggers touchstart, toggle flag
  // since touch events come before mouse event / click
  // callback of mouse event will get in callback
  // `isMouse === false`
  isMouse = false;
});

// now the code that you want to write
// should also work with `mouse*` events
$('a.someClass').on('click', function () {
  if (isMouse) {
    // interaction with mouse event
    // ...
  } else {
    // reset for the next event detection
    // this is crucial for devices that have both
    // touch screen and mouse
    isMouse = true;

    // interaction with touch event
    // ...
  }
});
— कोआला युंग
स्रोत
0

मैं उसी मुद्दे पर भाग गया, जहां क्लिक के रूप में एक एकल स्पर्श भी पंजीकृत था। जब मैंने शीर्ष मतदान उत्तरों की टिप्पणियों के माध्यम से पढ़ा, तो मैं अपने समाधान के साथ आया:

var body = document.getElementsByTagName('body')[0];
var mouseCount = 0;

// start in an undefined state 
// (i use this to blend in elements once we decide what input is used)
var interactionMode = 'undefined';


var registerMouse = function() {
  // count up mouseCount every time, the mousemove event is triggered
  mouseCount++;

  // but dont set it instantly. 
  // instead wait 20 miliseconds (seems to be a good value for multiple move actions), 
  // if another mousemove event accoures switch to mouse as interaction 
  setTimeout(function() {
    // a touch event triggers also exactly 1 mouse move event.
    // So only if mouseCount is higher than 1 we are really moving the cursor by mouse.
    if (mouseCount > 1) {
      body.removeEventListener('mousemove', registerMouse);
      body.removeEventListener('touchend', registerTouch);

      interactionMode = 'mouse';
      console.log('now mousing');
      listenTouch();
    }

    // set the counter to zero again
    mouseCount = 0;
  }, 20);
};

var registerTouch = function() {
  body.removeEventListener('mousemove', registerMouse);
  body.removeEventListener('touchend', registerTouch);

  interactionMode = 'touch';
  console.log('now touching');
  mouseCount = 0;

  listenMouse();
};

var listenMouse = function() {
  body.addEventListener("mousemove", registerMouse);
};
var listenTouch = function() {
  body.addEventListener("touchend", registerTouch);
};

listenMouse();
listenTouch();

// after one second without input, assume, that we are touching
// could be adjusted to several seconds or deleted
// without this, the interactionMode would stay 'undefined' until first mouse or touch event
setTimeout(function() {
  if (!body.classList.contains('mousing') || body.classList.contains('touching')) {
    registerTouch();
  }
}, 1000);
/* fix, so that scrolling is possible */

html,
body {
  height: 110%;
}
Mouse or touch me
स्निपेट का विस्तार करें

एकमात्र समस्या जो मुझे मिली है, वह यह है कि आपको स्क्रॉल करने में सक्षम होना चाहिए, एक स्पर्श घटना का ठीक से पता लगाने के लिए। एक टैब (स्पर्श) समस्या बना सकता है।

— जनीस नेक्सॉर इयानस बेट्ज़
स्रोत
0

मैंने अपने Phonegap ऐप के लिए इस समस्या का पता लगाने में घंटों बिताए और मैं इस हैक के साथ आया। यह कंसोल चेतावनी उत्पन्न करता है यदि ट्रिगर की गई घटना एक "निष्क्रिय" घटना है, जिसका अर्थ है कि यह किसी भी परिवर्तन को सक्रिय नहीं करता है, लेकिन यह काम करता है! मैं किसी भी विचार को बेहतर बनाने के लिए या बेहतर तरीके में दिलचस्पी लूंगा। लेकिन यह प्रभावी रूप से मुझे $ .touch () को सार्वभौमिक रूप से उपयोग करने की अनुमति देता है।

$(document).ready(function(){
  $("#aButton").touch(function(origElement, origEvent){
    console.log('Original target ID: ' + $(origEvent.target).attr('id'));
  });
});

$.fn.touch = function (callback) {
    var touch = false;
    $(this).on("click", function(e){
        if (!touch)
        {
            console.log("I click!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }else{
            touch = true;
        }
        touch = false;
    });
    $(this).on("touchstart", function(e){
        if (typeof e.touches != typeof undefined)
        {
            e.preventDefault();
            touch = true;
            console.log("I touch!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="aButton">A Button</button>
स्निपेट का विस्तार करें

— नीलकंठ
स्रोत
0

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

कम दर्दनाक समाधान यहाँ होगा, मेरी राय में, लॉन्च पर एक मेनू प्रदर्शित करने के लिए (केवल उपयोगकर्ताओं के लिए कीबोर्ड के लिए 'alt' प्रबंधन के साथ) और हो सकता है कि स्थानीयस्टोरेज / कुकीज़ / सर्वराइड के साथ पसंद को संग्रहीत करने के लिए या उसी पसंद को बनाए रखने के लिए अगले आगंतुक समय आता है।

— Ernoriel
स्रोत
-4

मैं इस दृष्टिकोण के खिलाफ जोरदार सिफारिश करूंगा। टच-स्क्रीन, डेस्कटॉप-आकार के उपकरणों पर विचार करें, और आपको हल करने के लिए समस्याओं का एक अलग सेट है।

कृपया बिना माउस (यानी कोई होवर पूर्वावलोकन) के बिना अपने ऐप को प्रयोग करने योग्य बनाएं।

— क्रिस ब्रॉडफुट
स्रोत
1
यह ठीक है कि मैं क्या करने की कोशिश कर रहा हूँ। मैं एक इंटरफ़ेस बनाने की कोशिश कर रहा हूं जो दोनों टैबलेट (माउस नहीं) पर और माउस के साथ सबसे अच्छा संभव तरीके से काम करेगा, लेकिन वे इंटरफेस आवश्यक रूप से बहुत अलग हैं।
— जॉन ग्जेंगसेट
मैं व्यापकता से सहमत हूं। आप डिवाइस डिटेक्शन (DeviceAtlas की तरह) का उपयोग करके सबसे अच्छे हैं और लोड समय पर प्रस्तावित इंटरफ़ेस का चयन करें।
— तैमूर इकोनेंन
-4

एक स्क्रिप्ट की सिफारिश करना चाहूँगा जिसने मेरी मदद की:

मैंने पर्याप्त परिणामों के बिना, सब कुछ सुझाए और पढ़ा था।

फिर मैंने कुछ और जांच की, और यह कोड पाया - device.js

मैं अपने ग्राहक की वेबसाइट में, माउस अस्तित्व का पता लगाने के लिए इसका उपयोग कर रहा हूं:
( वर्ग <html>होना चाहिए desktop) और यह बहुत अच्छा लगता है, और touchसमर्थन के लिए, मैं बस नियमित जांच 'ontouchend' in documentकरता हूं और एक विशिष्ट चीज की आवश्यकता के लिए दोनों डिटेक्ट्स से जानकारी का उपयोग करता हूं।

— vsync
स्रोत
यह यूए सूँघने के बराबर है, इस विषय में पहले से ही कई बार उठाया गया है। यह माउस के साथ उपकरणों के मामले को हल नहीं करता है और विंडोज 8 की तरह स्पर्श करता है, और यह निश्चित रूप से भविष्य का प्रमाण नहीं है।
— ह्यूगो सिल्वा
मैं इसका उपयोग इस EXACT मामले को हल करने के लिए करता हूं जिसे आपने ग्राहक के आवेदन में उल्लेख किया है और यह अच्छा काम करता है। यह भविष्य का प्रमाण है, क्योंकि इसका विकास डेवलपर द्वारा किया जाता है।
— विस्कॉन्सिन
2
जिस मामले का मैंने उल्लेख किया है (टच सक्षम लैपटॉप) आपकी स्क्रिप्ट को "डेस्कटॉप" के रूप में पहचाना जाएगा, भले ही मैं माउस का उपयोग नहीं कर रहा था। "यह भविष्य का प्रमाण है, क्योंकि यह इसे डेवलपर द्वारा बनाए रखा गया है" - मुझे लगता है कि आप यहां "भविष्य के प्रमाण" की बात को पूरी तरह से याद करते हैं। और यदि आपने पढ़ा और जैसा कि आपने कहा है, सब कुछ करने की कोशिश की है, तो आपने देखा होगा कि गिगी का जवाब पहले से ही यूए सूंघने का सुझाव देता है।
— ह्यूगो सिल्वा
-7

यह आमतौर पर पता लगाने के लिए एक बेहतर विचार है कि क्या माउस / ब्राउज़र प्रकार का पता लगाने के बजाय माउसओवर फ़ंक्शन का समर्थन किया गया है। आप बस निम्नलिखित द्वारा कर सकते हैं:

if (element.mouseover) {
    //Supports the mouseover event
}

सुनिश्चित करें कि आप निम्न कार्य नहीं करते हैं:

if (element.mouseover()) {
    // Supports the mouseover event
}

उत्तरार्द्ध वास्तव में विधि को बुलाएगा, बजाय इसके अस्तित्व की जांच के।

आप यहाँ और अधिक पढ़ सकते हैं: http://www.quirksmode.org/js/support.html

— माक्र्स स्वोप
स्रोत
2
मैं वास्तव में नहीं जानता कि आपके पोस्ट से क्या प्राप्त करना है, लेकिन अगर ('बॉडी' में 'ओनमूवर') [0]) अलर्ट ('ऑनमाउसओवर'); iPhone में एक संदेश भी प्रदर्शित करता है
— nraynaud
1
यह केवल जांचता है कि माउसओवर फ़ंक्शन को परिभाषित किया गया है, जो कि लगभग सभी ब्राउज़रों पर होगा। यह पता नहीं लगाता है कि एक माउस वास्तव में मौजूद है या नहीं।
— जॉन गेंजेंगसेट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.