: सक्रिय छद्म वर्ग मोबाइल सफारी में काम नहीं करता है

109

IPhone / iPad / iPod पर Webkit में, <a>जब आप तत्व पर टैप करते हैं, तो टैग के लिए सक्रिय छद्म वर्ग ट्रिगर नहीं करता है। मैं इसे ट्रिगर करने के लिए कैसे प्राप्त कर सकता हूं? उदाहरण कोड:

<style> 
a:active { 
    background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>

— जेसी रसक
स्रोत

238

<body ontouchstart="">
    ...
</body>

केवल एक बार लागू किया गया, जैसा कि हर बटन तत्व के विपरीत था, पृष्ठ के सभी बटन को ठीक करने के लिए। वैकल्पिक रूप से आप ' Fastclick ' नामक इस छोटे JS लाइब्रेरी का उपयोग कर सकते हैं । यह स्पर्श उपकरणों पर क्लिक की घटनाओं को गति देता है और इस मुद्दे का भी ध्यान रखता है।

— wilsonpage
स्रोत

19

क्या यह केवल ontouchstartबिना जोड़ने के लिए पर्याप्त नहीं है =""? (एचटीएमएल 5)

— फेकली

2

किसी भी भविष्य के पाठकों के लिए, मैंने यहां एक डेमो पोस्ट किया है: http://jsbin.com/EjiWILe/3/ । अपने iOS डिवाइस पर कार्यक्षमता की जाँच करें।

— 19:58 पर mululse

6

क्या आप बता सकते हैं कि आपने एक खाली श्रोता को शरीर में क्यों लगाया है? यह कैसे काम करता है?

— मोरिज़ियो बत्तघिनी

2

मैं उपयोग कर रहा था: फोकस, और यह उसके लिए भी काम करता है। जादू के लिए धन्यवाद।

— टेकब्रैट

मैं इस विधि का उपयोग करके iOS 9.1 और 9.3 पर पेज फ्रीज कर रहा हूं ... उन संस्करणों में एक जेएस बग था, लेकिन अभी भी उन ओएस पर 0.5% उपयोगकर्ता हैं

— रस्किन

55

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

आप -webkit-tap-highlight-colorडेस्कटॉप के समान व्यवहार करने के लिए बटन को कॉन्फ़िगर करने के लिए एक टच इवेंट सेट करने के साथ संयोजन में सीएसएस संपत्ति का उपयोग भी कर सकते हैं । IOS पर, माउस इवेंट्स इतनी जल्दी भेजे जाते हैं कि डाउन या एक्टिव स्टेट कभी प्राप्त नहीं होता है। इसलिए, :activeछद्म स्थिति को तभी ट्रिगर किया जाता है जब HTML तत्व पर एक टच ईवेंट सेट होता है- उदाहरण के लिए, जब ontouchstart तत्व पर निम्नानुसार सेट होता है:
<button class="action" ontouchstart=""
        style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
    Testing Touch on iOS
</button>
अब जब बटन को टैप किया जाता है और iOS पर रखा जाता है, तो बटन आसपास के पारदर्शी ग्रे रंग के दिखने के बिना निर्दिष्ट रंग में बदल जाता है।

दूसरे शब्दों में, एक ontouchstartईवेंट सेट करना (भले ही वह खाली हो) स्पष्ट रूप से ब्राउज़र को घटनाओं को छूने के लिए प्रतिक्रिया करने के लिए कह रहा है।

मेरी राय में, यह त्रुटिपूर्ण व्यवहार है, और संभवतया उस समय से पहले का है जब "मोबाइल" वेब मूल रूप से नगण्य था (लिंक स्क्रीन पर उन स्क्रीनशॉट पर एक नज़र डालें, जो मेरा मतलब है) और सब कुछ माउस उन्मुख था। यह ध्यान रखना दिलचस्प है कि अन्य, नए मोबाइल ब्राउज़र, जैसे कि एंड्रॉइड पर, डिस्प्ले: `सक्रिय 'छद्म स्थिति ठीक ठीक, बिना किसी हैक के जैसे कि iOS के लिए आवश्यक है।

(साइड-नोट: यदि आप iOS पर अपनी स्वयं की कस्टम शैलियों का उपयोग करना चाहते हैं, तो आप डिफ़ॉल्ट ग्रे ट्रांसलूसेंट बॉक्स को भी निष्क्रिय कर सकते हैं, जिसे iOS CSS संपत्ति :activeका उपयोग करके छद्म-स्थिति के स्थान पर उपयोग करता है -webkit-tap-highlight-color, जैसा कि ऊपर लिंक किए गए पेज में बताया गया है) ।)

कुछ प्रयोग के बाद, तत्व ontouchstartपर एक घटना को स्थापित करने का अपेक्षित समाधान <body>जो सभी घटनाओं को छूता है, तो बुलबुला पूरी तरह से काम नहीं करता है। यदि पृष्ठ लोड होने पर व्यूपोर्ट में तत्व दिखाई देता है, तो यह ठीक काम करता है, लेकिन नीचे स्क्रॉल करना और व्यूपोर्ट से बाहर गए तत्व को टैप करना छद्म स्थिति को ट्रिगर नहीं करता है :active, जैसे इसे करना चाहिए। तो, के बजाय

<!DOCTYPE html>
<html><body ontouchstart></body></html>

ईवेंट को बॉडी पर बॉब करने (jQuery का उपयोग करके) पर निर्भर करने के बजाय सभी तत्वों के लिए ईवेंट संलग्न करें:

$('body *').on('touchstart', function (){});

हालांकि, मुझे इसके प्रदर्शन निहितार्थों के बारे में जानकारी नहीं है, इसलिए सावधान रहें।

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

— user128216
स्रोत

6

क्यों और कैसे नहीं की महान व्याख्या ! धन्यवाद!

— कोडरफिन

6

देवों को समझने के लिए अपवित्र किया गया, न कि केवल एक "जादू" नुस्खा। यह दूसरों की तुलना में असीम रूप से अधिक जानकारीपूर्ण है; यह हमारे लिए लिखने के लिए धन्यवाद।

— user508633

विस्तृत विवरण + चेतावनी के लिए तैयार। यह सही उत्तर होना चाहिए।

— डक का मास्टर

39

अपने <a> टैग में ontouchstart के लिए एक ईवेंट हैंडलर जोड़ें। यह CSS को जादुई रूप से काम करने का कारण बनता है।

<a ontouchstart="">Click me</a>

— जेसी रसक
स्रोत

3

क्षमा करें, यह पुराना उत्तर है, लेकिन यह काम क्यों करता है? मैं एक कारण के रूप में "जादुई रूप से" बुरा नहीं मानता, लेकिन अगर आप बता सकते हैं कि यह क्यों काम करता है, तो मैं अधिक विवरण पढ़ना पसंद करूंगा।

— mhulse

1

@ म्हुलसे मैं भी जानना चाहूंगा कि क्यों।

— जेसी रूसक

हा! हम एक ही नाव में हैं। मैं कुछ शोध करने की कोशिश करूंगा और इस मामले पर (अर्ध) आधिकारिक डॉक्स का लिंक यहां पोस्ट करूंगा। मुझे यह पसंद है कि यह तकनीक काम करती है, मुझे आश्चर्य है कि क्यों?

— mululse

7

यह मेरे लिए काम करता है:

document.addEventListener("touchstart", function() {},false);

नोट: यदि आप यह ट्रिक करते हैं तो यह डिफ़ॉल्ट टैप-हाइलाइट रंग हटाने के लायक भी है मोबाइल सफारी निम्नलिखित सीएसएस नियम का उपयोग करके लागू होता है।

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

— dhqvinh
स्रोत

5

8 दिसंबर 2016 तक, स्वीकृत उत्तर ( <body ontouchstart="">...</body>) सफारी 10 (आईफोन 5 एस) पर मेरे लिए काम नहीं करता है: यह हैक केवल उन तत्वों के लिए काम करता है जो पृष्ठ लोड पर दिखाई देते थे।

हालाँकि, जोड़ना:

<script type='application/javascript'>
  document.addEventListener("touchstart", function() {}, false);
</script>

करने के लिए head, जिस तरह मैं चाहता हूँ काम नकारात्मक पक्ष के साथ है कि अब भी स्क्रॉल दौरान सभी स्पर्श ईवेंट को गति प्रदान करता है :activeछुआ तत्वों पर छद्म राज्य। (यदि यह आपके लिए एक समस्या है, तो आप FighterJet के :hover समाधान पर विचार कर सकते हैं ।)

— अली
स्रोत

4

//hover for ios
-webkit-tap-highlight-color: #ccc;

यह मेरे लिए काम करता है, अपने सीएसएस को उस तत्व पर जोड़ें जिसे आप हाइलाइट करना चाहते हैं

— लाल आँख
स्रोत

3

क्या आप सभी छद्म वर्गों या सिर्फ एक का उपयोग कर रहे हैं? यदि आप कम से कम दो का उपयोग कर रहे हैं, तो सुनिश्चित करें कि वे सही क्रम में हैं या वे सभी टूट गए हैं:

a:link
a:visited
a:hover
a:active

..उस क्रम में। इसके अलावा, यदि आप केवल उपयोग कर रहे हैं: सक्रिय, जोड़ें: लिंक, भले ही आप इसे स्टाइल न कर रहे हों।

— tahdhaze09
स्रोत

आदेश के बारे में महान टिप महत्वपूर्ण है जब छद्म वर्गों स्टाइल।

— ब्रायनारपी

1

मैंने एक उपकरण प्रकाशित किया है जो आपके लिए इस मुद्दे को हल करना चाहिए।

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

इसे एक ही बार में हल करना चाहिए: https://www.npmjs.com/package/active-touch

आपको या तो अपनी आवश्यकता होगी: सक्रिय शैलियों को .active वर्ग को सौंपा गया है या अपना स्वयं का वर्ग नाम चुनना है। डिफ़ॉल्ट रूप से स्क्रिप्ट सभी लिंक तत्वों के साथ काम करेगी, लेकिन आप इसे अपने स्वयं के चयनकर्ताओं के साथ लिख सकते हैं।

ईमानदार, उपयोगी प्रतिक्रिया और योगदान बहुत सराहना की!

— dmitrizzle
स्रोत

2

वह लाइब्रेरी प्रत्येक लिंक तत्व में 9 (नॉन पैसिव) ईवेंट श्रोताओं को जोड़ता है, लेकिन रिमूवेस्टलिस्टनर को कॉल नहीं करता है - यह एकल पृष्ठ अनुप्रयोगों के लिए एक बड़ा दोष होगा जो मुझे लगता है

— Drenai

1

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

— dmitrizzle

1

जो लोग ontouchstart का उपयोग नहीं करना चाहते हैं, उनके लिए आप इस कोड का उपयोग कर सकते हैं

<script>
 document.addEventListener("touchstart", function(){}, true);
</script>

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

1

मैंने इस उत्तर और इसके प्रकारों की कोशिश की , लेकिन कोई भी मज़बूती से काम नहीं कर रहा था (और मैं इस तरह के सामान के लिए 'जादू' पर भरोसा करना पसंद नहीं करता)। इसलिए मैंने इसके बजाय निम्नलिखित किया, जो कि सभी प्लेटफार्मों पर पूरी तरह से काम करता है, न कि केवल Apple:

पुनर्नामकरण सीएसएस घोषणाओं का उपयोग किया जाता :activeकरने के लिए .active।

सभी प्रभावित तत्वों की सूची बनाई और इसे हटाने के लिए वर्ग और घटना संचालकों को pointerdown/mousedown/touchstartलागू करने के लिए घटना संचालकों को जोड़ा । JQuery का उपयोग करना:.activepointerup/mouseup/touchend

let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown";
let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave";

let clickableThings = '<comma separated list of selectors>';
$(clickableThings).on(controlActivationEvents,function (e) {
    $(this).addClass('active');
}).on(controlDeactivationEvents, function (e) {
    $(this).removeClass('active');
});

यह थोड़ा थकाऊ था, लेकिन अब मेरे पास एक समाधान है जो Apple OS संस्करणों के बीच टूटने के लिए कम असुरक्षित है। (और इस ब्रेकिंग की तरह कुछ की जरूरत कौन है?)

— daffinm
स्रोत

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

— डेफिनम

0

एक समाधान के :targetबजाय पर भरोसा करने के लिए है :active:

<style> 
a:target { 
    background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>

वर्तमान url द्वारा एंकर को लक्षित किए जाने पर शैली चालू हो जाएगी, जो मोबाइल पर भी मजबूत है। दोष यह है कि आपको url में एंकर को खाली करने के लिए एक अन्य लिंक की आवश्यकता है। पूरा उदाहरण:

a:target { 
    background-color: red;
}

<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>

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

— rgmt
स्रोत

-3

इस प्रश्न से संबंधित कोई 100% नहीं है, लेकिन आप इसे प्राप्त करने के लिए सीएसएस सिबलिंग हैक का उपयोग कर सकते हैं

एचटीएमएल

<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>

एससीएसएस

input {
    &:checked + label {
      background-color: red;
    }
  }

यदि आप शुद्ध html / css टूलटिप का उपयोग करना चाहते हैं

span {
  display: none;
}
input {
    &:checked ~ span {
      display: block;
    }
  }

— Seeliang
स्रोत

-6

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">

<title></title>

<style>
        a{color: red;}
        a:hover{color: blue;}
</style>
</head>

<body>

        <div class="main" role="main">
                <a href="#">Hover</a>
        </div>

</body>
</html>

— TroyM
स्रोत

1

एफएक्यू के अनुसार, हस्ताक्षर और स्व-पदोन्नति की अनुमति नहीं है।

— LittleBobbyTables - Au Revoir