स्पर्श और माउस (उदा। सतह)

Question

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

मैं ईवेंट श्रोताओं को जोड़ना चाहता हूं जब कोई उपयोगकर्ता किसी DOM तत्व से इंटरैक्ट करता है। अब मैं कर सकते हैं:

if ('ontouchstart' in document.documentElement) { 
    //Attach code for touch event listeners 
    document.addEventListener("touchstart" myFunc, false); 
} else { 
    //Attach code for mouse event listeners 
    document.addEventListener("mousedown" myFunc, false); 
} 

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

तो फिर मैंने सोचा, ठीक है, मैं यह कर सकता है:

if ('ontouchstart' in document.documentElement) { 
    //Attach code for touch event listeners 
    document.addEventListener("touchstart" myFunc, false); 
} 
//Always attach code for mouse event listeners 
document.addEventListener("mousedown" myFunc, false); 

उपकरण जिन्हें स्पर्श का समर्थन नहीं करते घटनाओं संलग्न नहीं होगा, लेकिन एक उपकरण के स्पर्श का उपयोग करता है इसके संचालकों रजिस्टर करेंगे। ->touchmove जब "touchstart" उठाया है

स्पर्श ब्राउज़र सामान्यतः चक्र touchstart के माध्यम से जाना क्योंकि

1. myFunc() सक्रिय होगा: हालांकि इस के साथ समस्या यह है कि myFunc() एक स्पर्श डिवाइस पर दो बार बुलाया जाएगा है ->touchend ->mousedown ->MouseMove ->mouseup ->क्लिक, myFunc() "mousedown"

में फिर से बुलाया जाएगा मैं में कोड जोड़ने पर विचार किया है यह e.preventDefault() कॉल लेकिन यह भी touchend के साथ-साथ mousedown/MouseMove/mouseup ब्लॉक करने के लिए लगता है myFunc() ऐसा है कि कुछ ब्राउज़रों पर (link)।

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

मुझे कुछ याद आना चाहिए क्योंकि ऐसा लगता है कि निश्चित रूप से इन जावास्क्रिप्ट कार्यान्वयन का निर्णय माउस और स्पर्श दोनों का समर्थन करने वाले ब्राउज़र की संभावना के साथ किया गया था!

Answer 1

संपादित: आप jQuery का उपयोग करते हैं, तो आप इस तरह करने में सक्षम हो जाएगा:

var clickEventType=((document.ontouchstart!==null)?'mousedown':'touchstart'); 

$("a").bind(clickEventType, function() { 
    //Do something 
}); 

इस बाँध की घटना का केवल एक ही सक्रिय हो जाएगा।

यहाँ मिला: How to bind 'touchstart' and 'click' events but not respond to both?

Answer 2

अंदर myFunc, ईवेंट प्रकार की जाँच करें। अगर यह टचस्टार्ट है, तो e.stopPropagation() करें।

function myFunc(e) { 
    if (e.type === 'touchstart') { 
     e.stopPropagation(); 
    } 
    //the rest of your code here 
} 

Answer 3

विंडोज 8 के लिए आप "एमएसपीइंटरडाउन" ईवेंट का उपयोग कर सकते हैं।

if (window.navigator.msPointerEnabled) { 
    document.addEventListener("MSPointerDown" myFunc, false); 
} 

इसके अलावा अपने शैली के लिए निम्नलिखित जोड़ें:

html { 
    -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */ 
    } 

अधिक जानकारी के लिए http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx देखें।