125

मेरे पास कुछ वेबसाइटें हैं जो मैंने कई बार बनाई हैं, जो कि jquery माउस इवेंट्स का उपयोग करती हैं ... मुझे अभी एक आईपैड मिला है और मैंने देखा कि ईवेंट्स पर सभी माउस क्लिकों में अनुवादित होते हैं ... इसलिए उदाहरण के लिए मुझे एक के बजाय दो क्लिक करने होंगे .. (पहला हॉवर, वास्तविक क्लिक से)

क्या इसे हल करने के लिए वर्कअराउंड तैयार है? शायद एक jquery कमांड मैं shoudl के बजाय माउसओवर / आउट आदि का उपयोग किया है .. धन्यवाद!

— फ्रांसेस्को
स्रोत

1

आपकी घटनाएँ किससे बंधी हैं? उदाहरण के लिए onclick इवेंट्स को ठीक काम करना चाहिए ... onmouseover, onmouseout और CSS: hover वे हैं जिन्हें संभालना थोड़ा मुश्किल है क्योंकि टच स्क्रीन के लिए "hover" उपलब्ध नहीं है। क्या आपके पास एक कोड नमूना है?

— scunliffe

एक बात मैं आपको सुझाव दूंगा कि यदि संभव हो तो अपने इंटरफ़ेस को फिर से पढ़ें। ipad / iphone पर इंटरैक्शन वास्तव में एक पीसी पर दर्पण नहीं करता है, और यह शायद आपकी वेबसाइट को महसूस करने के लिए एक बुद्धिमान बात है कि यह समान मल्टीटच तंत्र के साथ ipad / iphone / अन्य टच डिवाइस के लिए लिखा गया था। सिर्फ एक विचार।

— jer

मैं "jer" से सहमत हूं। यह एक अजीब सवाल है, मुझे नहीं लगता कि यहां समाधान व्यक्तिगत रूप से एक "समाधान" है। मुझे लगता है कि डेस्कटॉप ब्राउज़र पर "माउस होवर" का टचस्क्रीन ब्राउज़र पर "फिंगर टैप" में अनुवाद करना समझ में आता है। यदि आप उस अनुवाद से सहमत हैं, लेकिन दो के बजाय एक टैप चाहते हैं, तो मैं शायद iPad इवेंट्स (जैसे "टचस्टार्ट") के लिए फीचर डिटेक्शन करूंगा और अपने ईवेंट हैंडलर को बदलूंगा। हो सकता है कि आपके कोड को एक jquery प्लगइन में "स्पर्श या क्लिक करें" प्रकार की कार्यक्षमता निकालें, जो सुविधाओं के आधार पर अलग तरह से आग लगाता है, लेकिन मुझे आपकी वेबसाइट / ऐप के लिए विशिष्ट लगता है।

— एंडी एटकिंसन

1

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

— एरॉन

205

यह पूरी तरह से परीक्षण नहीं किया गया है लेकिन चूंकि iOS आग की घटनाओं को छूता है, यह काम कर सकता है, यह मानते हुए कि आप एक jQuery सेटिंग में हैं।

$('a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
});

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

— cduruk
स्रोत

17

मेरी अमानत कहाँ है? : पी

— cduruk

2

धैर्य, पडवान। एसओ ने कहा कि प्रभावी होने में 24 घंटे लगते हैं।

— एंड्रयू हेजेज

2

JQuery 1.7 के रूप में .onपसंद किया जाता है .live। इस जवाब को पढ़ने के बाद, मैंने पाया कि $('a').on('click touchend', function(e) {...})शानदार तरीके से काम करने के लिए अपना कोड बदलना ।

— ब्लेज़मॉन्गर

23

खैर, यह शुरुआती मुद्दे को हल करता है, लेकिन एक नया बनाता है: जब स्वाइप करने पर क्लिक किया जाता है। यह कोई हल नहीं है।

— लुकसाक

9

इसके दोष हैं। यदि आप target="_blank"इसके साथ एक लिंक पर क्लिक करते हैं तो यह एक ही विंडो में और एक नई विंडो में खुलेगा।

— rybo111

37

यह पूरी तरह से स्पष्ट नहीं है कि आपका प्रश्न क्या है, लेकिन यदि आप माउस के लिए होवर प्रभाव को बनाए रखते हुए डबल क्लिक को समाप्त करना चाहते हैं, तो मेरी सलाह यह है:

पर मंडराना प्रभाव जोड़ें touchstartऔर mouseenter।
पर हॉवर प्रभाव निकालें mouseleave, touchmoveऔर click।

पृष्ठभूमि

एक माउस को अनुकरण करने के लिए, वेबकिट जैसे ब्राउज़र निम्न घटनाओं को आग लगाते हैं यदि कोई उपयोगकर्ता टच स्क्रीन (आईपैड) की तरह एक उंगली को छूता है और जारी करता है (स्रोत: HTML5rocks.com पर टच और माउस ):

touchstart
touchmove
touchend
300ms देरी, जहां ब्राउज़र सुनिश्चित करता है कि यह एक एकल नल है, न कि एक डबल टैप
mouseover
mouseenter
- नोट : यदि कोई mouseover, mouseenterया mousemoveईवेंट पृष्ठ सामग्री को बदलता है, तो निम्न ईवेंट को कभी भी निकाल नहीं दिया जाता है।
mousemove
mousedown
mouseup
click

यह संभव नहीं लगता कि केवल वेबब्रोसर को माउस घटनाओं को छोड़ दें।

क्या खराब है, अगर कोई माउसओवर ईवेंट पृष्ठ सामग्री को बदलता है, तो क्लिक इवेंट को कभी भी निकाल नहीं दिया जाता है, जैसा कि सफारी वेब कंटेंट गाइड - हैंडलिंग इवेंट , विशेष रूप से 6.4 में वन-फिंगर इवेंट्स पर बताया गया है। । वास्तव में "सामग्री परिवर्तन" क्या है, ब्राउज़र और संस्करण पर निर्भर करेगा। मैंने पाया है कि iOS 7.0 के लिए, सामग्री परिवर्तन में पृष्ठभूमि रंग में परिवर्तन (या नहीं है?) है।

समाधान समझाया

संक्षेप में दुहराना:

पर मंडराना प्रभाव जोड़ें touchstartऔर mouseenter।
पर हॉवर प्रभाव निकालें mouseleave, touchmoveऔर click।

ध्यान दें कि कोई कार्रवाई नहीं है touchend !

यह स्पष्ट रूप से माउस की घटनाओं के लिए काम करता है: mouseenterऔर mouseleave(थोड़ा सुधार संस्करणों mouseoverऔरmouseout ) निकाल दिया जाता है, और जोड़ सकते हैं और मंडराना को हटा दें।

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

यह स्पर्श घटनाओं के लिए भी काम करता है: touchstartहोवर पर प्रभाव जोड़ा जाता है। इस पर '' 'नहीं' '' हटा दिया जाता है touchend। इसे फिर से जोड़ा जाता है mouseenter, और इस कारण से कोई सामग्री परिवर्तन नहीं होता है (यह पहले से ही जोड़ा गया था), clickघटना भी निकाल दी जाती है, और उपयोगकर्ता को फिर से क्लिक करने की आवश्यकता के बिना लिंक का पालन किया जाता है!

एक touchstartघटना के बीच एक ब्राउज़र में 300ms की देरी होती है और clickवास्तव में इसे अच्छे उपयोग में लाया जाता है क्योंकि इस कम समय के दौरान होवर प्रभाव दिखाया जाएगा।

यदि उपयोगकर्ता क्लिक को रद्द करने का निर्णय लेता है, तो उंगली की एक चाल सामान्य रूप से ऐसा करेगी। आम तौर पर, यह एक समस्या है क्योंकि किसी भी mouseleaveघटना को निकाल नहीं दिया जाता है, और होवर का प्रभाव बना रहता है। शुक्र है, यह आसानी से होवर प्रभाव को हटाकर तय किया जा सकता है touchmove।

बस!

ध्यान दें कि FastClick लाइब्रेरी का उपयोग करते हुए, उदाहरण के लिए, 300ms देरी को दूर करना संभव है , लेकिन यह इस प्रश्न के दायरे से बाहर है।

वैकल्पिक समाधान

मैंने निम्नलिखित विकल्पों के साथ निम्नलिखित समस्याएं पाई हैं:

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

आगे की पढाई

http://jsfiddle.net/macfreek/24Z5M/ । इस सैंडबॉक्स में अपने लिए उपरोक्त समाधान का परीक्षण करें।
http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser । यह एक ही जवाब, थोड़ा और पृष्ठभूमि के साथ।
http://www.html5rocks.com/en/mobile/touchandmouse/ । सामान्य रूप से टच और माउस के बारे में html5rocks.com पर शानदार पृष्ठभूमि लेख।
https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html । सफारी वेब कंटेंट गाइड - हैंडलिंग इवेंट। विशेष रूप से यह आंकड़ा 6.4 है, जो बताते हैं कि आगे कोई इवेंट के दौरान एक एक सामग्री परिवर्तन के बाद निकाल दिया जाता है में देखें mouseoverया mousemoveघटना।

आईपैड / आईफोन डबल क्लिक की समस्या भी देखें और मोबाइल ब्राउज़रों पर होवर को अक्षम करें ।

— MacFreek
स्रोत

2

उन लोगों के लिए सबसे अच्छा स्पष्टीकरण की तरह लगता है जो अधिक सटीक समाधान चाहते हैं। Thanx

— antiplayer

> IOS7 के लिए बैकलॉग रंग के बारे में जानकारी के लिए विशेष धन्यवाद। मैंने कुछ समय बिताने की कोशिश की जब यह काम करना शुरू किया।

— स्टैम्पैंग

20

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

यहाँ एक उदाहरण CSS और HTML है - माउस पर तारांकित लेबल वाला एक उत्पाद ब्लॉक:

HTML:

<a href="#" class="s"><span class="s-star"></span>Some text here</a>

सीएसएस:

.s {
   background: url(some-image.png) no-repeat 0 0;

}
.s:hover {
   background: url(some-image-r.png) no-repeat 0 0;
}

.s-star {
   background: url(star.png) no-repeat 0 0;
   height: 56px;
   position: absolute;
   width: 72px;
   display:none;
}

.s:hover .s-star {
   display:block;
}

समाधान (द्वितीयक सीएसएस):

/* CSS */
/* Keep hovers the same or hidden */
.s:hover {
   background:inherit;
}
.s:hover .s-star {
   display:none;
}

— पावेल बोगैटिनोव
स्रोत

1

आईओएस का

— जल्दी

यह उत्तर पृष्ठभूमि की छवियों की ओर है, लेकिन क्या आपके पास सरल अस्पष्टता परिवर्तनों का समाधान है? यह समाधान इसके लिए काम नहीं करता है।

— इयान एस

5

ओवरकंप्लीड बनाने की आवश्यकता नहीं है।

$('a').on('touchend', function() {
    $(this).click();
});

— Jsonras
स्रोत

5

मेरे लिए जो काम किया है वह यहाँ दूसरों ने पहले ही कहा है:

होवर या मूसमव (जो मेरे मामले में घटना है) पर तत्वों को न दिखाएँ / छिपाएँ।

यहाँ Apple क्या कहता है ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html :

एक क्लिक करने योग्य तत्व एक लिंक, प्रपत्र तत्व, छवि मानचित्र क्षेत्र, या किसी अन्य तत्व के साथ mousemove, मूसडाउन, माउसअप या ऑनक्लिक हैंडलर है

यदि उपयोगकर्ता एक क्लिक करने योग्य तत्व को टैप करता है, तो इस क्रम में घटनाएं आती हैं: माउसओवर, मूसमव, मूसडाउन, माउसअप, और क्लिक करें। इसके अलावा, अगर पृष्ठ की सामग्री मूसमोव इवेंट पर बदलती है, तो अनुक्रम में कोई भी बाद की घटना नहीं भेजी जाती है। यह व्यवहार उपयोगकर्ता को नई सामग्री में टैप करने की अनुमति देता है।

तो, आप @ woop के समाधान का उपयोग कर सकते हैं: userAgent का पता लगाएं, जांचें कि क्या यह और iOS डिवाइस है और फिर ईवेंट को बांधें। मैंने इस तकनीक का उपयोग करना समाप्त कर दिया क्योंकि यह मेरी आवश्यकताओं के अनुरूप है और यह अधिक समझ में आता है कि जब आप इसे नहीं चाहते तो हॉवर घटनाओं को बांधें नहीं।

लेकिन ... यदि आप userAgents के साथ गड़बड़ नहीं करना चाहते हैं और फिर भी hover / mousemove पर तत्वों को छिपाते / दिखाते हैं, तो मुझे पता चला कि आप इस तरह से देशी जावास्क्रिप्ट का उपयोग करके ऐसा कर सकते हैं:

$("body").on("mouseover", function() {
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
});

यह डेस्कटॉप संस्करण पर काम करेगा और मोबाइल संस्करण पर कुछ भी नहीं करेगा।

और थोड़ी अधिक संगतता के लिए ...

$("body").on("mouseover", function() {
   if (document.getElementsByTagName && document.querySelector) { // check compatibility
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
    } else {
        $(".my-class").show();
        $(".my-selector div").hide();
    }
});

— Adauto
स्रोत

1

वह बिट "यदि पृष्ठ की सामग्री मूसमोव इवेंट पर बदलती है, तो अनुक्रम में कोई भी बाद की घटना नहीं भेजी जाती है" वास्तव में मेरे लिए यह किया गया था। मेरे पास एक पृष्ठ था जहां हेडर लिंक को एक डबल टैप की आवश्यकता होती है जहां सामग्री में बटन (एम पर सभी खुश css3 संक्रमण के साथ) बस एक टैप की आवश्यकता होगी। दिखाई दिया कि हेडर लिंक में एक छद्म तत्व था जो अस्पष्टता से चला गया: 0 से अपारदर्शिता: 1 पर मंडराना। उस प्रभाव को हटाने से समस्या का तुरंत हल हो गया और मुझे अभी भी सीएसएस वर्कअराउंड मिल गया जो मुझे अभी भी चाहिए था।

— नकली हाक

3

cduruk का समाधान काफी प्रभावी था, लेकिन इससे मेरी साइट के कुछ हिस्सों पर समस्या पैदा हो गई। क्योंकि मैं पहले से ही CSS hover क्लास को जोड़ने के लिए jQuery का उपयोग कर रहा था, इसलिए सबसे आसान समाधान था कि मोबाइल डिवाइस पर CSS hover क्लास को न जोड़ें (या अधिक सटीक रूप से, केवल मोबाइल डिवाइस पर नहीं होने पर इसे जोड़ने के लिए)।

यहाँ सामान्य विचार था:

var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/);

if (!(ios)) {
    $(".portfolio-style").hover(
        function(){
            $(this).stop().animate({opacity: 1}, 100);
            $(this).addClass("portfolio-red-text");
        },
        function(){
            $(this).stop().animate({opacity: 0.85}, 100);
            $(this).removeClass("portfolio-red-text");
        }
    );
}

* निदर्शी उद्देश्यों के लिए कोड कम

— woop
स्रोत

1

यह स्पष्ट रूप से उत्तर है। अन्य "समाधान" समस्या को ठीक नहीं करते हैं। iOS सफारी यह सोचकर स्पष्ट रूप से त्रुटिपूर्ण है कि हम पहले क्या चाहते हैं। जब आप किसी आइटम पर होवर करते हैं, तो अन्य OS की वास्तविक होवर सुविधाएँ होती हैं।

— जोशुआ पैक

यह केवल एक चीज थी जो मेरे लिए काम करती थी। आपको बहुत - बहुत धन्यवाद!

— tx291

2

मुझे लगता है कि इसके mouseenterस्थान पर प्रयास करना बुद्धिमानी होगी mouseover। इसका उपयोग आंतरिक रूप से तब किया जाता है जब .hover(fn,fn)आप इसे चाहते हैं और आम तौर पर आप चाहते हैं।

— पॉल आयरिश
स्रोत

1

मुझे मौजूदा समाधानों के साथ निम्नलिखित समस्याएं थीं, और कुछ ऐसा मिला जो उन सभी को हल करने के लिए लगता है। यह मानता है कि आप कुछ क्रॉस ब्राउज़र, क्रॉस डिवाइस के लिए लक्ष्य कर रहे हैं, और डिवाइस को सूँघना नहीं चाहते हैं।

समस्याओं को हल करता है

सिर्फ touchstartया touchend: का उपयोग करना

आग लगने की घटना का कारण बनता है जब लोग सामग्री को अतीत में स्क्रॉल करने की कोशिश कर रहे होते हैं और बस इस तत्व पर अपनी उंगली तब होती है जब वे स्वाइप करना शुरू करते हैं - अप्रत्याशित रूप से कार्रवाई को ट्रिगर करना।
डेस्कटॉप पर राइट क्लिक के समान घटना को लॉन्गप्रेस पर आग लगाने का कारण बन सकता है । उदाहरण के लिए, यदि आपका क्लिक ईवेंट URL X पर जाता है, और उपयोगकर्ता एक नए टैब में X खोलने के लिए तरसता है, तो उपयोगकर्ता दोनों टैब में X को खोलने के लिए भ्रमित होगा। कुछ ब्राउज़रों (जैसे iPhone) पर यह लंबे प्रेस मेनू को प्रदर्शित होने से भी रोक सकता है।

ट्रिगर mouseoverपर घटनाओं touchstartऔर mouseoutपर touchmoveकम गंभीर परिणाम है, लेकिन, हमेशा की तरह ब्राउज़र के व्यवहार के साथ हस्तक्षेप करता है उदाहरण के लिए:

एक लंबा प्रेस एक माउसओवर को ट्रिगर करेगा जो कभी समाप्त नहीं होता है।
कई एंड्रॉइड ब्राउज़र उंगली के स्थान को touchstartएक की तरह मानते हैं mouseover, जो mouseoutअगले पर एड है touchstart। एंड्रॉइड में माउसओवर सामग्री को देखने का एक तरीका यह है कि ब्याज के क्षेत्र को स्पर्श करें और अपनी उंगली को थोड़ा पृष्ठ को स्क्रॉल करें। इलाज touchmoveके रूप में mouseoutटूट जाता है यह।

समाधान

सिद्धांत रूप में, आप केवल एक ध्वज को जोड़ सकते हैं touchmove, लेकिन iPhones टचमोव को ट्रिगर करता है, भले ही कोई आंदोलन न हो। सिद्धांत रूप में, आप केवल ईवेंट और ईवेंट की तुलना कर सकते हैं touchstartऔर आईफ़ोन पर, कोई नहीं है या ।touchendpageXpageY touchend pageXpageY

दुर्भाग्य से सभी ठिकानों को कवर करने के लिए यह थोड़ा अधिक जटिल है।

$el.on('touchstart', function(e){
    $el.data('tstartE', e);
    if(event.originalEvent.targetTouches){
        // store values, not reference, since touch obj will change
        var touch = e.originalEvent.targetTouches[0];
        $el.data('tstartT',{ clientX: touch.clientX, clientY: touch.clientY } );
    }
});
$el.on('touchmove', function(e){
    if(event.originalEvent.targetTouches){
        $el.data('tstartM', event.originalEvent.targetTouches[0]);
    }
});

$el.on('click touchend', function(e){
    var oldE = $el.data('tstartE');
    if( oldE && oldE.timeStamp + 1000 < e.timeStamp ) {
        $el.data('tstartE',false);
        return;
    }
    if( $el.data('iosTouchM') && $el.data('tstartT') ){
        var start = $el.data('tstartT'), end = $el.data('tstartM');
        if( start.clientX != end.clientX || start.clientY != end.clientY ){
            $el.data('tstartT', false);
            $el.data('tstartM', false);
            $el.data('tstartE',false);
            return;
        }
    }
    $el.data('tstartE',false);

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

— user56reinstatemonica8
स्रोत

1

मैकफ्रीक का जवाब मेरे लिए बेहद मददगार था। यहां कुछ हैंड्स-ऑन कोड दिया गया है जो आपकी मदद करता है।

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

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

यहाँ बटन हैं:

<a class="menu_button" href="#">
    <div class="menu_underline"></div>
</a>

मैं "menu_underline" को माउसओवर पर फीका करना और माउसआउट पर फीका करना चाहता हूं। लेकिन मैं चाहता हूं कि टच डिवाइस एक क्लिक पर लिंक का अनुसरण करने में सक्षम हों, दो नहीं।

समाधान - यहाँ यह काम करने के लिए jQuery है:

//Mouse Enter
$('.menu_button').bind('touchstart mouseenter', function(){
    $(this).find(".menu_underline").fadeIn();
});

//Mouse Out   
$('.menu_button').bind('mouseleave touchmove click', function(){
    $(this).find(".menu_underline").fadeOut();
});

इस MacFreak पर आपकी मदद के लिए बहुत धन्यवाद।

— पागल कुत्ता कैडोजन
स्रोत

1

मुझे अभी पता चला है कि यह काम करता है यदि आप एक खाली श्रोता जोड़ते हैं, तो मुझसे न पूछें, लेकिन मैंने इसे iPhone और iPad पर iOS 9.3.2 के साथ परीक्षण किया और यह ठीक काम किया।

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    var elements = document.getElementsByTagName('a');
    for(var i = 0; i < elements.length; i++){
        elements[i].addEventListener('touchend',function(){});
    }
}

— freek van der wand
स्रोत

1

मैं "सोचता हूं" कि आपके लिंक पर कोई ऑनमूवर इवेंट नहीं है, जहां 1 टैप ऑनमॉवरओवर को सक्रिय करता है और डबल टैप लिंक को सक्रिय करता है। लेकिन आइडीके। मेरे पास आईपैड नहीं है। मुझे लगता है कि हाँ, इशारा / स्पर्श घटनाओं का उपयोग करेगा।

https://developer.apple.com/documentation/webkitjs

— अल्बर्ट
स्रोत

0

मुझे एक ही समस्या थी लेकिन एक टच डिवाइस पर नहीं। जब भी आप क्लिक करते हैं, तो ईवेंट ट्रिगर हो जाता है। घटना के बारे में कुछ न कुछ तो है।

हालाँकि, मेरा समाधान इस तरह था: क्लिक इवेंट (या टच?) पर आपने टाइमर सेट किया था। यदि लिंक को एक्स एमएस के भीतर फिर से क्लिक किया जाता है, तो आप बस झूठे वापस आते हैं।

प्रति तत्व टाइमर सेट करने के लिए, आप उपयोग कर सकते हैं $.data()।

यह ऊपर वर्णित @Ferdy समस्या को भी ठीक कर सकता है।

— आयनो स्टाकि
स्रोत

क्या आप पोस्ट कर सकते हैं कि यह कोड कैसा दिखता है? मुझे क्लिक इवेंट की यह समस्या दो बार हो रही है।

— फैंसी

0

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

हालाँकि, मैं केवल सुरक्षित रहने के लिए, 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));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

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

यह भी ध्यान दें कि उपयोगकर्ता एजेंट iemobile का परीक्षण आपको विंडोज फोन की तुलना में पता चला माइक्रोसॉफ्ट मोबाइल उपकरणों की व्यापक रेंज देगा।

— पीटर पैन
स्रोत

0

आप उपयोग कर सकते हैं click touchend,

उदाहरण:

$('a').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

ऊपर के उदाहरण स्पर्श उपकरणों पर सभी लिंक को प्रभावित करेंगे।

यदि आप केवल विशिष्ट लिंक को लक्षित करना चाहते हैं, तो आप उन पर एक कक्षा निर्धारित करके ऐसा कर सकते हैं, अर्थात:

HTML:

<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>

jQuery:

$('a.prevent-extra-click').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

चीयर्स,

जेरोन

— जीरो डब्ल्यू
स्रोत

0

मैं एक ऐसी ही स्थिति में भाग गया, जहाँ मुझे किसी तत्व के माउसइंटर / मूसलीव्यू / क्लिक स्टेट्स से बंधी हुई घटनाएँ मिलीं, फिर भी एक iPhone पर, उपयोगकर्ता को डबल क्लिक करके पहले माउसेंटर इवेंट को ट्रिगर करने के लिए तत्व पर क्लिक करना पड़ा, फिर क्लिक इवेंट को फायर करने के लिए। ।

मैंने इसे ऊपर के समान विधि का उपयोग करके हल किया था, लेकिन मैंने jQuery $ .browser प्लगइन (jQuery 1.9> के लिए) का उपयोग किया और निम्नानुसार माउसइंटर बाइंडिंग इवेंट में .trigger ईवेंट जोड़ा।

// mouseenter event
$('.element').on( "mouseenter", function() {
    // insert mouseenter events below

    // double click fix for iOS and mouseenter events
    if ($.browser.iphone || $.browser.ipad) $(this).trigger('click');
});
// mouseleave event
$('.element').on( "mouseleave", function() { 
    // insert mouseout events below
});
// onclick event
$('.element').on( "click", function() {
    // insert click events below
});

Thetrigger iPhones या iPads पर देखे जाने पर तत्व के माउसइंटर (या प्रारंभिक क्लिक) पर .click ईवेंट हैंडलर को फायर करके तत्व को डबल क्लिक करने की आवश्यकता को रोकता है। सबसे सुरुचिपूर्ण समाधान नहीं हो सकता है, लेकिन यह मेरे मामले में बहुत अच्छा काम करता है और एक प्लगइन का उपयोग करता है जो मेरे पास पहले से ही था, और मुझे इन उपकरणों के तहत काम करने वाली मेरी मौजूदा घटनाओं को प्राप्त करने के लिए कोड की एक पंक्ति जोड़ने की आवश्यकता थी।

आप यहां jQuery $ .browser प्लगइन पा सकते हैं: https://github.com/gabceb/jquery-browser-plugin

— ouija
स्रोत

0

जब आप गलती से एक लिंक पर अपनी उंगली स्लाइड करते हैं तो पुनर्निर्देशन से बचने के लिए बस एक सुधार।

// tablet "one touch (click)" X "hover" > link redirection
$('a').on('touchmove touchend', function(e) {

    // if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
    if (e.type == 'touchmove') {
        $.data(this, "touchmove_cancel_redirection", true );
        return;
    }

    // if it's a simple touchend, data() for this element doesn't exist.
    if (e.type == 'touchend' && !$.data(this, "touchmove_cancel_redirection")) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
    }

    // if touchmove>touchend, to be redirected on a future simple touchend for this element
    $.data(this, "touchmove_cancel_redirection", false );
});

— Lenor
स्रोत

0

मैकफ्रीक से प्रेरणा लेकर, मैंने कुछ ऐसा काम किया जो मेरे लिए काम करता है।

यह js विधि hover को ipad पर चिपके रहने से रोकती है, और कुछ मामलों में क्लिक को दो क्लिक के रूप में पंजीकृत करने से रोकती है। CSS में, यदि आपके पास कोई भी है: अपने css में hover psudo क्लासेस, उन्हें .hover में बदलें। उदाहरण के लिए .some-class: hover to .some-class.hover।

इस कोड को एक ipad पर देखें कि कैसे css और js hover पद्धति अलग तरीके से व्यवहार करती है (केवल होवर इफेक्ट में)। CSS बटन में फैंसी क्लिक अलर्ट नहीं है। http://jsfiddle.net/bensontrent/ctgr6stm/

function clicker(id, doStuff) {
  id.on('touchstart', function(e) {
    id.addClass('hover');
  }).on('touchmove', function(e) {
    id.removeClass('hover');
  }).mouseenter(function(e) {
    id.addClass('hover');
  }).mouseleave(function(e) {
    id.removeClass('hover');
  }).click(function(e) {
    id.removeClass('hover');
    //It's clicked. Do Something
    doStuff(id);
  });
}

function doStuff(id) {
  //Do Stuff
  $('#clicked-alert').fadeIn(function() {
    $(this).fadeOut();
  });
}
clicker($('#unique-id'), doStuff);

button {
  display: block;
  margin: 20px;
  padding: 10px;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.hover {
  background: yellow;
}
.btn:active {
  background: red;
}
.cssonly:hover {
  background: yellow;
}
.cssonly:active {
  background: red;
}
#clicked-alert {
  display: none;
}

<button id="unique-id" class="btn">JS Hover for Mobile devices<span id="clicked-alert"> Clicked</span>

</button>
<button class="cssonly">CSS Only Button</button>
<br>This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks. In CSS, if you have any :hover in your css, change them to .hover For example .some-class:hover to .some-class.hover

स्निपेट का विस्तार करें

— बेन्सन
स्रोत

0

ब्रेक स्क्रॉलिंग के बिना काम करने वाले लिंक प्राप्त करने के लिए, मैंने इसे jQuery मोबाइल के "टैप" इवेंट के साथ हल किया:

    $('a').not('nav.navbar a').on("tap", function () {
        var link = $(this).attr('href');
        if (typeof link !== 'undefined') {
            window.location = link;
        }
    });

— mooses
स्रोत

0

मुझे बहुत देर हो चुकी है, मुझे पता है लेकिन यह सबसे आसान काम है जो मैंने पाया है:

    $('body').on('touchstart','*',function(){   //listen to touch
        var jQueryElement=$(this);  
        var element = jQueryElement.get(0); // find tapped HTML element
        if(!element.click){
            var eventObj = document.createEvent('MouseEvents');
            eventObj.initEvent('click',true,true);
            element.dispatchEvent(eventObj);
        }
    });

यह न केवल लिंक (एंकर टैग) के लिए बल्कि अन्य तत्वों के लिए भी काम करता है। उम्मीद है की यह मदद करेगा।

— writeToBhuwan
स्रोत

0

यह छोटा स्निपेट काम करने लगता है। लिंक टैप होने पर क्लिक इवेंट को ट्रिगर करें:

  $('a').on('touchstart', function() {
    $(this).trigger('click');
  });

— फ्लो डेवलप करें
स्रोत

0

अन्य उत्तर में से कोई भी मेरे लिए काम नहीं करता है। मेरे ऐप में बहुत सारे ईवेंट श्रोता, स्वयं के चेकबॉक्स और लिंक हैं जो श्रोता के हैं और श्रोता के बिना लिंक हैं।

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

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
    if ($(this).data("touched") === true) {
        e.stopImmediatePropagation();
        return false;
    }
    return;
}).on("touchend", selector, function (e) {
    if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
        // user action is not a tap
        return;
    var $this = $(this);
    // Visit: http://stackoverflow.com/questions/1694595/can-i-call-jquery-click-to-follow-an-a-link-if-i-havent-bound-an-event-hand/12801548#12801548
    this.click();
    // prevents double click
    $this.data("touched", true);
    if (timer)
        clearTimeout(timer);
    setTimeout(function () {
        $this.data("touched", false);
    }, 400);
    e.stopImmediatePropagation();
    return false;
}).on("touchstart", function (e) {
    startX = e.originalEvent.changedTouches[0].screenX;
    startY = e.originalEvent.changedTouches[0].screenY;
});

— Magu
स्रोत

0

यह मेरे लिए तब काम करता है जब आपके पास jquery ui ड्रॉपडाउन होता है

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      $('.ui-autocomplete').off('menufocus hover mouseover');
}

— Makubex
स्रोत

0

होवर सीएसएस घटना के अंदर "प्रदर्शन" शैली को बदलने से बचें। मेरे पास होवर राज्य में "प्रदर्शन: ब्लॉक" था। हटाने के बाद आईओएस सिंगल टैप से लिन्स पर चला गया। वैसे ऐसा लगता है कि नवीनतम IOS अपडेट ने इस "सुविधा" को ठीक कर दिया है

— Hellbyte
स्रोत

0

IPad पर डबल-क्लिक को हल करने का सबसे सरल तरीका मीडिया क्वेरी में होवर प्रभाव के लिए अपने सीएसएस को लपेट रहा है @media (pointer: fine):

@media (pointer: fine) {
  a span {
    display: none;
  }
  a:hover span {
    display: inline-block;
  }
}

CSS जो इस मीडिया क्वेरी में लिपटी है, केवल डेस्कटॉप पर लागू होगी।

इस समाधान की व्याख्या यहाँ है https://css-tricks.com/annoying-mobile-double-tap-link-issue/

— गलीना
स्रोत

-1

आप navigator.userAgentइस तरह की जाँच कर सकते हैं:

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
    //bind your mouseovers...
}

लेकिन आप ब्लैकबेरी, droids, umpty अन्य टचस्क्रीन उपकरणों के लिए जाँच करना होगा। आप केवल माउसओवर को तभी बाँध सकते हैं यदि यूजरएजेंट में मोज़िला, IE, वेबकिट, या ओपेरा शामिल हैं, लेकिन आपको अभी भी कुछ उपकरणों के लिए स्क्रीन करने की आवश्यकता है क्योंकि Droid, उदाहरण के लिए, इसके उपयोगकर्ता स्ट्रिंग के रूप में रिपोर्ट करता है:

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

IPhone का स्ट्रिंग समान है। यदि आप केवल iPhone, iPod, iPad, Android और ब्लैकबेरी के लिए स्क्रीन करते हैं, तो आपको अधिकांश हैंडहेल मिल सकते हैं, लेकिन उनमें से सभी नहीं।

— jasongetsdown
स्रोत

मुझे लगता है, अभी के लिए, पागल नहीं होने के लिए, सबसे अच्छी बात सिर्फ एक स्क्रिप्ट हो सकती है जो हॉवर की घटनाओं को रोकती है..तो मुझे लगता है कि पहला उत्तर अच्छा था ... और हाँ आप सही हैं..मुझे चाहिए अन्य सभी उपकरणों के बारे में सोचें ... मुझे लगता है कि Jquery या कुछ प्लगइन में इस तरह की डाइटिंग सुविधा थी ..!

— फ्रांसेस्को

wurfl.sourceforge.net यह आपका जवाब हो सकता है। इसके वायरलेस उपकरणों का एक डेटाबेस। एक jQuery प्लगइन के रूप में सीधा नहीं होगा, लेकिन आप हमेशा एक लिख सकते हैं! वहाँ भी tera-wurfl.com है जो एक xml फ़ाइल के बजाय डेटाबेस का उपयोग करता है। बहुत खुदाई नहीं की गई है, लेकिन वहाँ एक होस्ट किया गया संस्करण हो सकता है ताकि आपको अपनी wurfl फ़ाइल या tera-wurfl डेटाबेस को अद्यतित रखने के बारे में चिंता न करनी पड़े।

— जसॉन्गसैडडाउन

1

क्या मुझे कुछ याद आ रहा है या आईपैड का पता लगाने के बारे में सवाल नहीं था, लेकिन आईपैड पर एक विशिष्ट व्यवहार के आसपास काम करने के बारे में?

— एंड्रयू हेजेज

5

यूए सूँघ रहा है? कैसे 90: पी

— माचा

-1

बस एक सीएसएस मीडिया क्वेरी करें जो टैबलेट और मोबाइल उपकरणों को बाहर कर देता है और वहां पर होवर डाल देता है। इसके लिए आपको वास्तव में jQuery या जावास्क्रिप्ट की आवश्यकता नहीं है।

@media screen and (min-device-width:1024px) {
    your-element:hover {
        /* Do whatever here */
    }
}

और यह सुनिश्चित करने के लिए इसे अपने HTML हेड में जोड़ना सुनिश्चित करें कि यह वास्तविक पिक्सेल के साथ गणना करता है न कि रिज़ॉल्यूशन के साथ।

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

— डैलिबर
स्रोत

iPad / iPhone होवर समस्या के कारण उपयोगकर्ता किसी लिंक पर डबल क्लिक करता है