"पॉइंटर-ईवेंट: कोई नहीं" का उपयोग करते समय CSS कर्सर प्रॉपर्टी जोड़ें

Question 1

मैं एक विशिष्ट लिंक को निष्क्रिय करने और कर्सर शैली को लागू करने की कोशिश कर रहा हूं, लेकिन यह CSS कमांड cursor: text;प्रभावी नहीं होगा। कर्सर हमेशा डिफ़ॉल्ट होता है। मैं नवीनतम फ़ायरफ़ॉक्स संस्करण का उपयोग कर रहा हूं।

सीएसएस:

pointer-events: none !important;
cursor: text;
color: Blue;

Question 2

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

यहाँ उदाहरण है

एचटीएमएल

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

सीएसएस

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

हालांकि कुछ ब्राउज़र असंगतताएं हैं। IE11 में यह काम करने के लिए, ऐसा लगता है कि आपको एक छद्म तत्व की आवश्यकता है। छद्म तत्व आपको एफएफ में पाठ का चयन करने की भी अनुमति देता है। अजीब तरह से पर्याप्त है, आप इसके बिना क्रोम में पाठ का चयन कर सकते हैं।

अपडेटेड उदाहरण

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

Question 3

यह मूल प्रश्न से बहुत लंबा है, लेकिन बिना किसी सूचक-घटनाओं के किसी भी रैपिंग तत्व और कर्सर के बिना यह मेरा समाधान है:

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

सीएसएस:

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

कोडपेन उदाहरण

संपादित करें:

Chrome ने टैबइंडेक्स विशेषता के साथ तत्वों पर क्लिक पर ध्यान केंद्रित करना शुरू कर दिया है (यहां तक कि टैबइंडेक्स = "- 1" के साथ)। सबसे तेज़ समाधान onfocus="this.blur()"तत्व को अनफ़ोकस करने के लिए सेट करना है।
आपको तत्व को ध्यान केंद्रित करने से रोकने की आवश्यकता है अन्यथा इसे दर्ज कुंजी द्वारा सक्रिय किया जा सकता है

Question 4

निर्दिष्ट करके pointer-events:noneआप सक्रिय रूप से घोषित कर रहे हैं कि तत्व और कर्सर के बीच कोई माउस इंटरैक्शन नहीं है। इसलिए इसमें कोई कर्सर नहीं हो सकता - यह सभी माउस व्यवहारों के लिए अदृश्य है ।

यहां पाए जाने का प्रमाण ।

Question 5

हटा दें pointer-events: none !important;। जावास्क्रिप्ट का उपयोग करके लिंक को अक्षम करें:

anchorElement.onclick = function(){
  return false;
}

यदि आपको नहीं पता कि जावास्क्रिप्ट anchorElementही नोड या तत्व है। HTML idविशेषता का उपयोग करके तत्व प्राप्त करने का सबसे आम तरीका है । मान लें कि हमारे पास है:

<a id='whatever' href='#'>Text Here</a>

आप कोड हो सकता है:

document.getElementById('whatever').onclick = function(){
  return false;
}

नोड्स प्राप्त करने के लिए कई अन्य तरीके हैं।

Question 6

मेरा उपयोग मामला एक ड्रैग करने योग्य तत्व था जिसमें कोई पॉइंटर-ईवेंट नहीं था और न ही पॉइंटर-ईवेंट के साथ कोई मूल तत्व।

मैंने इसे एक वैश्विक स्टाइल को लागू करते हुए केवल हथियाने वाले कर्सर को मजबूर करते हुए सशर्त रूप से हल किया। (मैं रिएक्ट और स्टाइल-घटकों का उपयोग कर रहा हूं, लेकिन वेनिला जेएस पर एक ही तर्क लागू किया जा सकता है)।

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

Question 7

आप एक और div बना सकते हैं और इसे अपने अंतिम div पर ठीक वैसा ही बना सकते हैं और एक css बना सकते हैं:

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

Question 8

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

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

मैंने भी कोशिश की ::beforeऔर सीधे ::afterसाथ button:disabled, लेकिन अभी ऐसा नहीं कर सका ...