IE के लिए css 'पॉइंटर-इवेंट्स' संपत्ति विकल्प

Question

मेरे पास एक ड्रॉप डाउन नेविगेशन मेनू है जिसमें कुछ शीर्षक को क्लिक करने पर दूसरे पृष्ठ पर नहीं जाना चाहिए (ये शीर्षक एक ड्रॉप डाउन मेनू खोलते हैं जब क्लिक किया जाता है) जबकि अन्य को नेविगेट करना चाहिए (इन में ड्रॉपडाउन नहीं है और सीधे नेविगेट करें), फिर भी, दोनों। प्रकारों ने hrefउन्हें परिभाषित किया है

इसे हल करने के लिए मैंने पूर्व प्रकार के शीर्षकों के लिए निम्नलिखित सीएसएस जोड़ा

pointer-events: none;

और यह ठीक काम कर रहा है। लेकिन जब से यह संपत्ति आईई द्वारा समर्थित नहीं है, मैं कुछ काम की तलाश कर रहा हूं। कष्टप्रद बात यह है कि मेरे पास HTML और जावास्क्रिप्ट कोड को पूरी तरह से बदलने के लिए पहुंच और विशेषाधिकार नहीं है ।

कोई विचार?

Comments

क्या HTML और स्क्रिप्ट तक पहुंच प्राप्त करने का कोई तरीका है? कोशिश करें कि जिसने भी आपको काम दिया है, उससे बात करें।

— काइल

@ इसके बारे में वास्तव में विशेषाधिकार की समस्या नहीं है, html / जावास्क्रिप्ट कोड को संशोधित करने के लिए कुछ तकनीकी कठिनाइयाँ भी हैं

— अनुपम

यहाँ उत्तर stackoverflow.com/questions/3680429/…

— संकेत साहू

stackoverflow.com/questions/3680429/…

— संकेत साहू

ध्यान दें कि pointer-eventsIE11 + में अब

— डेविड स्टोरी

Answer 1

पॉइंटर-इवेंट एक मोज़िला हैक है और जहां इसे वेबकिट ब्राउज़र में लागू किया गया है, आप इसे IE ब्राउज़र में एक और मिलियन वर्षों तक देखने की उम्मीद नहीं कर सकते हैं।

हालांकि एक समाधान है जो मैंने पाया:

परतों के माध्यम से माउस घटनाओं को अग्रेषित करना

यह एक प्लगइन का उपयोग करता है जो माउस ईवेंट को लेने और इसे किसी अन्य तत्व को भेजने के लिए जावास्क्रिप्ट के कुछ ज्ञात / समझा गुणों का उपयोग नहीं करता है।

यहाँ एक और जावास्क्रिप्ट समाधान भी है ।

अक्टूबर 2013 के लिए अपडेट : जाहिरा तौर पर यह v11 में IE के लिए आ रहा है। स्रोत । धन्यवाद टिम।

Comments

Ie9 का दस्तावेज़ीकरण कहता है कि यह इस संपत्ति का समर्थन करता है (हालांकि मैंने अभी तक9 यानी की कोशिश नहीं की है)। फिर भी, मेरे दिमाग में पहले से ही विचार थे जो लिंक में दिए गए हैं, लेकिन जैसा कि मैं कुछ सीएसएस विशिष्ट समाधान की तलाश में था, मैं उनका उपयोग नहीं कर सकता। मैं इस समस्या पर समय बिताने के बजाय html / js कोड को संशोधित करने का प्रयास करूंगा। आपके समय और मदद के लिए बहुत-बहुत

— धन्यवाद

W3C में, यह मुद्दा क्लिक-हाइजैकिंग के कारण बहस में चला गया । अंगूठे का नियम: जैसे ही W3C उम्मीदवार की सिफारिश को प्रकाशित करेगा, IE टीम इसे लागू करेगी और जल्दबाजी में एक सबक हमेशा बेकार कर देती है । इसके अलावा, मोज़िला ने कहा कि यह सभी " चेतावनी: गैर-एसवीजी तत्वों के लिए CSS में सूचक-घटनाओं का उपयोग प्रयोगात्मक है। यह फीचर CSS3 UI ड्राफ्ट विनिर्देश का हिस्सा हुआ करता था लेकिन, कई खुले मुद्दों के कारण, CSS4 को स्थगित कर दिया गया है। । "

— वालकैन काला कौआ

Caniuse.com के अनुसार, CSS पॉइंटर इवेंट IE 11 में आ रहे हैं। caniuse.com/#feat=pointer-events

— Tim

यह एक कारण नहीं है एक जवाब @eyurdakul

— scumah

"you can't expect to see it in IE browsers for another million years."केवल 3 साल लगे ...

— ProblemsOfSumit

Answer 2

यहाँ एक और समाधान है जिसे कोड की 5 लाइनों के साथ लागू करना बहुत आसान है:

1. शीर्ष तत्व (आप जिस पॉइंटर घटनाओं को बंद करना चाहते हैं) के लिए 'मूसडाउन' ईवेंट को कैप्चर करें।
2. 'मूसडाउन' में शीर्ष तत्व को छिपाएं।
3. अंतर्निहित तत्व प्राप्त करने के लिए 'document.elementFromPoint ()' का उपयोग करें।
4. शीर्ष तत्व को अनहाइड करें।
5. अंतर्निहित तत्व के लिए वांछित घटना निष्पादित करें।

उदाहरण:

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});

Comments

इसने मेरे लिए काम किया। मैं छोटे सुधारों को पसंद करता हूं जिन्हें मैं बहुत सारे

— पॉलीफ़िलों को

यह एक रचनात्मक समाधान है, मुझे यह पसंद है। समस्या सिर्फ यह ब्राउज़रों जहां बिंदु घटनाओं के लिए अनावश्यक संसाधन कहते है कर काम करते हैं। यह केवल सशर्त IE ब्राउज़रों को निष्पादित करने के लिए बहुत अच्छा होगा।

— ट्रेवर

मैं सहमत हूँ, इसका एक त्वरित समस्या के लिए जल्दी से लागू है, लेकिन वास्तव में इसके कार्यान्वयन में, मैं केवल इसे लागू करता हूं यदि ब्राउज़र IE है, तो आप इसे इस चेक के अंदर रखें: अगर (navigator.appName == 'Microsoft इंटरनेट एक्सप्लोरर' ) {... तर्क यहाँ जाता है ..}

— MarzSocks

यह बहुत अच्छी तरह से काम करता है! जब से 11 माना जाता है कि पॉइंटर-ईवेंट का समर्थन करना शुरू कर दिया है, मैं इसे सिर्फ इस क्लॉज के अंदर लपेटता हूं: यदि (navigator.userAgent.toLowerCase ()। indexOf ('msie')> 0) THANKS!

— हांक

Answer 3

IE के लिए एक समाधान है - इनलाइन SVG का उपयोग करें और SVG में पॉइंटर-ईवेंट = "कोई नहीं" सेट करें। इंटरनेट एक्सप्लोरर के पॉइंटर-ईवेंट का अनुकरण कैसे करें: में मेरा जवाब देखें : कोई नहीं?

Comments

यह कुछ मामलों के लिए एक महान समाधान है, लेकिन मैं अपने मामले में इसका उपयोग नहीं कर सकता।

— पलककुल

Answer 4

यह उल्लेखनीय है कि विशेष रूप से IE के लिए, disabled=disabledएंकर टैग के लिए काम करता है:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE इसे एक disabledतत्व के रूप में मानता है और क्लिक इवेंट को ट्रिगर नहीं करता है। हालांकि, disabledएंकर टैग पर एक मान्य विशेषता नहीं है। इसलिए यह अन्य ब्राउज़रों में काम नहीं करेगा। उनके pointer-events:noneलिए स्टाइल में आवश्यक है।

अद्यतन 1 : इसलिए निम्नलिखित नियम जोड़ना मेरे लिए क्रॉस-ब्राउज़र समाधान की तरह लगता है

2 : आगे की अनुकूलता के लिए, क्योंकि IE लंगर टैग के लिए शैलियों का निर्माण नहीं करेगा disabled='disabled', इसलिए वे अभी भी सक्रिय दिखेंगे । इस प्रकार, a:hover{}नियम और स्टाइल एक अच्छा विचार है:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

Chrome, IE11 और IE8 पर कार्य करना।
बेशक, ऊपर सीएसएस मानती है कि एंकर टैग के साथ गाया जाता हैdisabled="disabled"

Comments

यह मेरे लिए काम नहीं किया। IE9-10 में ऑनक्लिक फ़ंक्शंस अभी भी निष्पादित होते हैं।

— निश्चित रूप

Answer 5

यहाँ इस सुविधा को लागू करने वाली एक छोटी स्क्रिप्ट है ( शी फ्रेडरिक ब्लॉग के लेख से प्रेरित है जिसमें काइल का उल्लेख है):

• पॉइंटर इवेंट्स पॉलीफ़िल ।

Comments

यह काम नहीं करता है अगर तत्व लंगर टैग हैं, मेरा मानना ​​है। कम से कम, यह मेरे लिए काम नहीं किया।

— कॉलिन डेक्ले

Answer 6

एक छद्म तत्व का उपयोग करते हुए, एक अदृश्य ब्लॉक के साथ आक्रामक तत्वों को कवर करें: :beforeया:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

इस प्रकार आप मूल तत्व पर भूमि क्लिक करते हैं। अच्छा नहीं है, अगर माता-पिता क्लिक करने योग्य हैं, लेकिन अन्यथा अच्छी तरह से काम करता है।

Comments

मैंने विकलांग विशेषता के साथ एक समान विचार का उपयोग किया। IE में विकलांग विशेषता को क्लिक करने की घटनाओं को रोकता है, लेकिन अगर बच्चे हैं तो वे अभी भी क्लिक को ट्रिगर करेंगे। बच्चों को कवर करना, इसलिए वे क्लिक करने योग्य नहीं हैं, इसका एक बढ़िया समाधान है। मुझे अस्पष्टता के साथ एक पृष्ठभूमि रंग का उपयोग करना पड़ा I IE रजिस्टर करने के लिए वहां एक वास्तविक तत्व था।

— ब्लेक प्लम्ब

Answer 7

मैंने इस समस्या का हल खोजने में लगभग दो दिन बिताए और मुझे यह सबसे अच्छा लगा।

यह जावास्क्रिप्ट और jquery का उपयोग करता है।

(GitHub) पॉइंटर_वेंट्स_पॉलिफिल

यह एक जावास्क्रिप्ट प्लग-इन को डाउनलोड / कॉपी करने के लिए उपयोग कर सकता है। बस उस साइट से कोड कॉपी / डाउनलोड करें और इसे सहेजें pointer_events_polyfill.js। उस जावास्क्रिप्ट को अपनी साइट में शामिल करें।

<script src="JS/pointer_events_polyfill.js></script>

इस jquery स्क्रिप्ट को अपनी साइट में जोड़ें

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

और अपने jquery प्लग-इन को शामिल करना न भूलें।

यह काम करता हैं! मैं पारदर्शी तत्व के तहत तत्वों को क्लिक कर सकता हूं। मैं IE 10 का उपयोग कर रहा हूं। मुझे आशा है कि यह IE 9 और नीचे भी काम कर सकता है।

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

जावास्क्रिप्ट:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

इससे आप टेक्स्ट को टेक्स्टबॉक्स में टाइप कर सकते हैं।

Answer 8

मैंने इस समस्या को हल करने के लिए एक और उपाय खोजा है। यदि ब्राउजर विंडो की चौड़ाई 1'000px से अधिक है, तो मैं href-आईट्री को सेट करने के लिए jQuery का उपयोग करता हूं javascript:;('नहीं', या ब्राउज़र पृष्ठ को फिर से लोड करेगा)। आपको अपने लिंक में एक आईडी जोड़ने की आवश्यकता है। यहाँ मैं क्या कर रहा हूँ:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

शायद यह आपके लिए उपयोगी हो।

Answer 9

उपयोग OnClientClick = "return false;"

Answer 10

आप <a>टैग के अंदर केवल "नहीं" भी जोड़ सकते हैं , मैं यह उन मेनू के लिए करता हूं जो <a>ड्रॉप डाउन के साथ टैग किए गए हैं । अगर नीचे नहीं गिरा है तो मैं url जोड़ता हूं लेकिन अगर किसी <ul> <li>सूची के साथ ड्रॉप डाउन हैं तो मैं इसे हटा देता हूं।

Answer 11

मुझे ऐसे ही मुद्दों का सामना करना पड़ा:

1. मुझे एक निर्देश में इस मुद्दे का सामना करना पड़ा, मैंने इसे अपने मूल तत्व के रूप में जोड़ने और सूचक-घटनाओं को बनाने का फैसला किया: इसके लिए कोई नहीं

2. उपरोक्त फ़िक्स ने चुनिंदा टैग के लिए काम नहीं किया, फिर मैंने कर्सर जोड़ा : टेक्स्ट (जो मैं चाहता था) और उसने मेरे लिए काम किया

यदि सामान्य कर्सर की जरूरत है तो आप कर्सर जोड़ सकते हैं : डिफ़ॉल्ट

Answer 12

सबसे अच्छा उपाय:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

सभी ब्राउज़रों पर पूरी तरह से चलता है

Comments

IE संस्करण <11 को छोड़कर, जहां सूचक घटनाओं का समर्थन नहीं किया जाता है। मुझे लगता है आपने पॉइंट छोड़ दिया।

— जेल-माइक