2010-07-13 26 views
6

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

  1. बटन कि वेबपृष्ठ पर कहीं भी
  2. क्लिक वजह से मेनू दिखाई देने लगते हैं करने के लिए है कि मेनू

नहीं है पर क्लिक करें: वहाँ अब दिखाई मेनू को छिपाने के लिए उपयोगकर्ता के लिए दो तरीके हैं जिस तरह से मैंने दूसरा विकल्प कोड किया है, वह विंडो तत्व पर ऑनक्लिक ईवेंट को बांधना है, और यह तुलना करें कि उपयोगकर्ता मेनू की स्थिति पर क्लिक करता है यह निर्धारित करने के लिए कि मेनू छुपाया जाना चाहिए या नहीं। यह फ़ायरफ़ॉक्स और सफारी में बहुत अच्छा काम करता है, लेकिन यह मोबाइल सफारी में विफल रहता है।

मैंने देखा कि विंडो ऑनक्लिक ईवेंट केवल तभी आग लगती है जब मैं पहले से असाइन किए गए ऑनक्लिक ईवेंट के साथ किसी अन्य तत्व पर क्लिक करता हूं। यदि मैं किसी तत्व पर क्लिक करता हूं जिसमें कोई ईवेंट नहीं है, तो विंडो की ऑनक्लिक घटना कभी नहीं होती है। यदि मैं मेनू पर प्रदर्शित बटन पर क्लिक करता हूं, तो यह बटन से जुड़ी घटना के साथ आग लग जाता है।

क्या मोबाइल सफारी में विंडो तत्व को ईवेंट असाइन करना संभव है?

उत्तर

0

आप को कुछ <div> पर जोड़ सकते हैं जो पूरे पृष्ठ को कवर करता है ताकि कोई फर्क नहीं पड़ता कि आप हमेशा उस तत्व पर क्लिक कर रहे हैं जिसमें onclick ईवेंट है। हालांकि, एक अच्छा समाधान नहीं है।

मुझे onclick ईवेंट विंडो से बंधे रहने की इच्छा नहीं है। आप एक कंटेनर <div> क्यों नहीं बनाते हैं जिस पर उस घटना है। फिर इसे संभाल लें जैसे आप वर्तमान में हैं।

7

मुझे भी यही समस्या आ रही है। यहां मेरे लिए क्या काम किया है। (नोट: मैं एक Modernizr और jQuery संदर्भ में काम कर रहा हूँ)

पहले, मैं Modernizr's addTest Plugin API का उपयोग कर iOS के लिए परीक्षण करने के लिए है, जो appleios या no-appleios तदनुसार वर्ग जोड़ देगा एक कस्टम Modernizr वर्ग जोड़ें।

क्योंकि मेरे शोध में body अपने स्वयं के एजेंडे पर घटनाओं को आग लग रहा है, मैं आईओएस संदर्भ में सभी दस्तावेज़ की सामग्री को एक तत्व के साथ लपेटकर थोड़ा सावधानी बरत रहा हूं। फिर मैं इस तत्व में एक ईवेंट हैंडलर जोड़ता हूं।

$(".appleios body").wrapInner('<div id="appleios-helper" />'); 
$("#appleios-helper").bind("mouseup", function(){return;}); 

इस धागे में पहले सुझाया गया था void(0) का उपयोग कर रहा था। मैंने कुछ त्वरित परीक्षण किया, और पाया कि void(0) घटना के रूप में बस शरीर को पहचानने के लिए स्पर्श नहीं कर रहा था। जब मैंने function(){return;} के रूप में अपने "खाली" फ़ंक्शन में प्लग किया, तो काम शुरू हो गया।

यह सब इस तथ्य पर निर्भर करता है कि मोबाइल सफारी में कोई घटना नहीं निकाल दी जाती है जब तक कि तत्व स्पष्ट रूप से आग लगने की घटना न हो (Safari Web Content Guide।) इस खाली घटना को रैपर पर डालने से, चीजें शरीर पर बुलबुले हो जाएंगी।

आप इन पुस्तकालयों में से कोई भी साथ स्ट्रेट जावास्क्रिप्ट कर रहे हैं, एक ही प्रभाव HTML मार्कअप

<html> 
... 
<body> 
<div id="appleios-helper" onmouseup="function(){return;}"> 
... 
</div> 
</body> 
</html> 

यह काम मुझे टूलटिप्स छिपाने के लिए जब दस्तावेज़ के शरीर पर कहीं भी छू से प्राप्त किया जा सकता है। आपकी माइलेज भिन्न हो सकती है।

1

सीधे शब्दों में मेरे लिए काम करता है एचटीएमएल शरीर के लिए डमी onclick हैंडलर जोड़ने:

<body onclick="void(0)"> 

ध्यान दें कि मैं हमेशा की तरह लाइव ईवेंट हैंडलर्स का उपयोग कर रहा हूँ के रूप में नीचे दिखाया गया है:

function liveHandler(event) { 
    var target = event.target; ...} 

window.addEventListener(evtype, liveHandler, true); 
// evtype such as 'mousedown' or 'click' 
// we use the capturing mode here (third parameter true) 
1

यह एक है पुराना सवाल, लेकिन मैं आज भी एक ही चीज़ के साथ संघर्ष कर रहा था।

मैंने पाया कि touchstart ईवेंट का उपयोग कर काम करता है।

मैं इसे इस तरह हल:

var isTouchDevice = 'ontouchstart' in document.documentElement; 
if (isTouchDevice) { 
    // Do touch related stuff 
    $(document).on('touchstart', function (event) { 
    // Do stuff 
    }); 
} else { 
    // Do non-touch related stuff 
    $(document).on('click', function() { 
    // Do stuff 
    }); 
} 
0

तुम भी कर सकते हैं:

$('body').css('cursor', 'pointer'); 

कोई विचार क्या एप्पल पर उन "इंजीनियर" कर रहे हैं। जबरदस्त हंसी।

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

स्रोत: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

लेख के समापन यह है:

तो मुझे समझ में नहीं क्यों यह सब मामला है, लेकिन यह सबसे निश्चित रूप से मामला है। यदि आपको समस्याएं हल हो रही हैं, तो बस शरीर और तत्व के बीच कहीं भी एक खाली-फ़ंक्शन ईवेंट हैंडलर जोड़ें, और आप जाने के लिए तैयार हैं। लेकिन यह जरूरी नहीं होना चाहिए।

संबंधित मुद्दे