CSS pointer-events प्रॉपर्टी के साथ माउस और टच इंटरैक्शन नियंत्रित करना

परिचय

CSS pointer-events प्रॉपर्टी का उपयोग करके, हम नियंत्रित कर सकते हैं कि कोई एलिमेंट माउस और टच इवेंट्स पर प्रतिक्रिया करता है या नहीं। यह ओवरले, डिसेबल्ड स्टेट्स, और जटिल लेयर्ड इंटरफेस के लिए उपयोगी है।

सिंटैक्स

pointer-events: auto | none;

मान

उदाहरण 1: लिंक्स को अक्षम करना

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      margin: 10vh;
      pointer-events: none;
    }
    a:last-of-type {
      pointer-events: auto;
    }
  </style>
</head>
<body>
  <a href="#">No pointer event here</a>
  <a href="#">Automatic pointer event here</a>
</body>
</html>

उदाहरण 2: फॉर्म एलिमेंट को अक्षम करना

<!DOCTYPE html>
<html>
<head>
  <style>
    select {
      margin: 10vh;
      pointer-events: none;
      background-color: mistyrose;
    }
  </style>
</head>
<body>
  <select>
    <option>No event here </option>
    <option>a</option>
    <option>b</option>
    <option>c</option>
  </select>
</body>
</html>

उन्नत उपयोग के मामले

1. क्लिक-थ्रू ओवरले

<!DOCTYPE html>
<html>
<head>
  <style>
    .overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      pointer-events: none; /* क्लिक्स पास होने देता है */
      z-index: 100;
    }
    .modal {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 2rem;
      border-radius: 8px;
      pointer-events: auto; /* मॉडल इंटरैक्टेबल है */
      z-index: 101;
    }
  </style>
</head>
<body>
  <div class="overlay"></div>
  <div class="modal">
    <h2>मॉडल डायलॉग</h2>
    <button>बंद करें</button>
  </div>
  <button style="margin: 2rem;">पेज बटन (ओवरले के माध्यम से क्लिक करने योग्य)</button>
</body>
</html>

2. लोडिंग स्टेट के दौरान फॉर्म सुरक्षा

<!DOCTYPE html>
<html>
<head>
  <style>
    form.submitting {
      pointer-events: none;
      opacity: 0.7;
    }
    form.submitting button::after {
      content: " प्रोसेसिंग...";
    }
  </style>
</head>
<body>
  <form id="myForm">
    <input type="text" required />
    <button type="submit">सबमिट करें</button>
  </form>
  <script>
    document.getElementById('myForm').addEventListener('submit', function(e) {
      e.preventDefault();
      this.classList.add('submitting');
      setTimeout(() => this.classList.remove('submitting'), 2000);
    });
  </script>
</body>
</html>

महत्वपूर्ण चेतावनी

pointer-events: none केवल पॉइंटर इवेंट्स (माउस, टच, पेन) को अक्षम करता है। यह नहीं रोकता:

• कीबोर्ड फोकस/नेविगेशन (tabindex)
• स्क्रीन रीडर एक्सेस
• फॉर्म सबमिशन (यदि जावास्क्रिप्ट के माध्यम से ट्रिगर किया गया)

सही अक्षमता के लिए, फॉर्म कंट्रोल्स पर disabled विशेषता या aria-disabled="true" + उचित ARIA का उपयोग करें।