HTML5 में संदर्भ मेनू ट्रिगर होने पर स्क्रिप्ट कैसे निष्पादित करें?

contextmenu एट्रिब्यूट (निरस्त)

contextmenu एट्रिब्यूट HTML5 में एक तत्व के लिए कस्टम संदर्भ मेनू (राइट-क्लिक मेनू) निर्दिष्ट करने के लिए उपयोग किया जाता था। **हालांकि, यह एट्रिब्यूट अब निरस्त (deprecated) हो चुका है और अधिकांश आधुनिक ब्राउज़र्स में समर्थित नहीं है।**

आधुनिक विकल्प: JavaScript के साथ कस्टम संदर्भ मेनू

आजकल कस्टम संदर्भ मेनू बनाने के लिए JavaScript और CSS का उपयोग किया जाता है:

उदाहरण: कस्टम राइट-क्लिक मेनू

<!DOCTYPE html>
<html>
<head>
<style>
    .context-menu {
        position: fixed;
        background: white;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        border-radius: 4px;
        padding: 5px 0;
        min-width: 150px;
        z-index: 1000;
        display: none;
    }
    .context-menu-item {
        padding: 8px 15px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .context-menu-item:hover {
        background: #f0f0f0;
    }
    .context-menu-divider {
        border-top: 1px solid #eee;
        margin: 5px 0;
    }
    #target-area {
        border: 2px dashed #ccc;
        padding: 50px;
        text-align: center;
        background: #f9f9f9;
        margin: 20px;
    }
</style>
</head>
<body>
    <div id="target-area">यहाँ राइट-क्लिक करें</div>
    
    <div id="customMenu" class="context-menu">
        <div class="context-menu-item" data-action="copy">कॉपी</div>
        <div class="context-menu-item" data-action="paste">पेस्ट</div>
        <div class="context-menu-divider"></div>
        <div class="context-menu-item" data-action="delete">हटाएँ</div>
        <div class="context-menu-item" data-action="inspect">निरीक्षण</div>
    </div>

    <script>
        const menu = document.getElementById('customMenu');
        const target = document.getElementById('target-area');
        
        target.addEventListener('contextmenu', function(e) {
            e.preventDefault(); // डिफ़ॉल्ट ब्राउज़र मेनू रोकें
            
            menu.style.left = e.pageX + 'px';
            menu.style.top = e.pageY + 'px';
            menu.style.display = 'block';
        });
        
        document.addEventListener('click', function() {
            menu.style.display = 'none';
        });
        
        menu.addEventListener('click', function(e) {
            const item = e.target.closest('.context-menu-item');
            if (item) {
                const action = item.dataset.action;
                alert('क्रिया: ' + action);
                menu.style.display = 'none';
            }
        });
    </script>
</body>
</html>

contextmenu इवेंट

contextmenu इवेंट (एट्रिब्यूट नहीं) अभी भी मानक है और राइट-क्लिक का पता लगाने के लिए उपयोग किया जाता है:

element.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    // कस्टम मेनू दिखाएँ
});