कैसे जब क्लिक एक लंगर टैग की मूल div बंद करने के लिए iOS उपकरणों

Question

उद्देश्य

पर touchstart साथ क्लिक को बदलने के लिए। नीचे दिए गए कोड में, मैं div performance_tt को छिपाना चाहता हूं जब उपयोगकर्ता एंकर टैग close_performance_tt पर क्लिक करता है।

समस्या

यह उस पर कई घंटे बिताने के बाद iOS उपकरणों पर काम करने के लिए प्राप्त करने में असमर्थ। सबकुछ ठीक है, यहां तक ​​कि ब्लैकबेरी 10 डिवाइस पर भी ठीक काम करता है।

<div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;"> 
    <div>Website performance has become an important consideration for most sites. 
    The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention. 
    As a result, creating a system that is optimized for fast responses and low latency is key.</div> 
    <a id="close_performance_tt" href="#">Close</a> 
    <script> 
    var userAgent = navigator.userAgent.toLowerCase(); 
    var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false); 
    if (isiOS) { 
     $("#close_performance_tt").bind('touchstart', function() { 
      alert('Touch-start event triggered'); 
     }); 
    } else { 
     $("#close_performance_tt").bind('click', function() { 
      alert('Click event triggered'); 
     }); 
    } 
    </script> 
</div> 

Answer 1

एक clickhandler कि आप बाद में उपयोग कर सकते हैं परिभाषित करें:

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click"); 

$("a").bind(clickHandler, function(e) { 
    alert("clicked or tapped. This button used: " + clickHandler); 
}); 

इस गैर टच डिवाइस और स्पर्श उपकरणों पर touchstart पर क्लिक ट्रिगर किया जाएगा।

जब ऐसा कहा जाता है, तो मैं दृढ़ता से Fast click का उपयोग करने की सलाह दूंगा, और नियमित क्लिक-ईवेंट का उपयोग करूंगा। उपर्युक्त समाधान के साथ, आप लिंक पर "टचस्टार्ट" ट्रिगर करेंगे जब आप पृष्ठ पर स्क्रॉल करने के लिए इसे स्वाइप करते हैं - जो आदर्श नहीं है।

Answer 2

iOS में a टैग तो लिंक पर स्पर्श (click सहित) माउस की घटनाओं को ट्रिगर किया जाएगा, एक क्लिक करने योग्य तत्व है।

इस कोड

$("#close_performance_tt").bind('click',function() { 
    alert('Click event triggered');        
}); 

iOS पर ठीक से काम करेगा।

अधिक जानकारी के लिए: http://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 3

http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

देखें क्लिक तरह आईओएस माउस घटनाओं Bubbe नहीं करते जब तक:

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

मेरे लिए सबसे आसान समाधान यह है कि यदि यह आईओएस टच डिवाइस है तो हर जगह cursor: pointer लागू करना है। चूंकि कोई कर्सर नहीं है, इसका कोई दृश्य प्रभाव नहीं है