HTML में माउस बटन दबाने पर तत्व पर स्क्रिप्ट कैसे निष्पादित करें?

onmousedown इवेंट एट्रिब्यूट

onmousedown एट्रिब्यूट HTML में किसी तत्व पर माउस बटन दबाए जाने पर (क्लिक पूरा होने से पहले) स्क्रिप्ट निष्पादित करता है। यह onclick से पहले फायर होता है और ड्रैग-एंड-ड्रॉप, कस्टम UI इंटरैक्शन, और गेम कंट्रोल्स के लिए उपयोगी है।

उदाहरण

निम्नलिखित कोड onmousedown और onmouseup का उपयोग दिखाता है:

<!DOCTYPE html>
<html>
<body>
    <h2>माउस डाउन/अप इवेंट्स</h2>
    <h3 id="myHeading" 
        onmousedown="mouseDown()" 
        onmouseup="mouseUp()">
        इस शीर्षक पर क्लिक करके दबाए रखें
    </h3>
    <p>क्लिक करें और दबाए रखें, फिर छोड़ें।</p>
    <p id="status">स्थिति: प्रतीक्षा 중...</p>
    
    <script>
        function mouseDown() {
            const el = document.getElementById("myHeading");
            el.style.color = "orange";
            el.style.transform = "scale(0.98)";
            document.getElementById("status").textContent = "स्थिति: माउस दबाया गया (mousedown)";
        }
        
        function mouseUp() {
            const el = document.getElementById("myHeading");
            el.style.color = "blue";
            el.style.transform = "scale(1)";
            document.getElementById("status").textContent = "स्थिति: माउस छोड़ा गया (mouseup)";
        }
    </script>
</body>
</html>

माउस इवेंट अनुक्रम

एक पूर्ण क्लिक के लिए इवेंट्स का क्रम:

1. mousedown - बटन दबाया गया
2. mouseup - बटन छोड़ा गया
3. click - क्लिक पूर्ण (उसी तत्व पर down + up)

अन्य संबंधित इवेंट्स:

• mousemove - माउस हिलने पर (बार-बार)
• dblclick - डबल क्लिक पर
• contextmenu - राइट-क्लिक पर

इवेंट ऑब्जेक्ट गुण

element.addEventListener('mousedown', (e) => {
    console.log('बटन:', e.button);        // 0=बाएँ, 1=मध्य, 2=दाएँ
    console.log('बटन्स:', e.buttons);      // दबे हुए बटन्स का बिटमास्क
    console.log('क्लाइंट X/Y:', e.clientX, e.clientY); // व्यूपोर्ट सापेक्ष
    console.log('पेज X/Y:', e.pageX, e.pageY);       // दस्तावेज़ सापेक्ष
    console.log('स्क्रीन X/Y:', e.screenX, e.screenY); // स्क्रीन सापेक्ष
    console.log('Ctrl/Shift/Alt:', e.ctrlKey, e.shiftKey, e.altKey);
});

व्यावहारिक उदाहरण: ड्रैग करने योग्य तत्व

<!DOCTYPE html>
<html>
<head>
<style>
    .draggable {
        width: 150px; height: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex; align-items: center; justify-content: center;
        border-radius: 10px;
        cursor: grab;
        user-select: none;
        position: absolute;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .draggable:active { cursor: grabbing; }
</style>
</head>
<body>
    <div id="box" class="draggable">मुझे खींचें</div>
    
    <script>
        const box = document.getElementById('box');
        let isDragging = false;
        let offsetX, offsetY;
        
        box.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - box.offsetLeft;
            offsetY = e.clientY - box.offsetTop;
            box.style.zIndex = 1000;
            box.style.transition = 'none';
        });
        
        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            e.preventDefault();
            box.style.left = (e.clientX - offsetX) + 'px';
            box.style.top = (e.clientY - offsetY) + 'px';
        });
        
        document.addEventListener('mouseup', () => {
            isDragging = false;
            box.style.transition = 'box-shadow 0.2s';
        });
    </script>
</body>
</html>

टच सपोर्ट जोड़ना

// टच इवेंट्स के लिए समान लॉजिक
box.addEventListener('touchstart', (e) => {
    isDragging = true;
    const touch = e.touches[0];
    offsetX = touch.clientX - box.offsetLeft;
    offsetY = touch.clientY - box.offsetTop;
}, { passive: false });

document.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    e.preventDefault(); // स्क्रॉलिंग रोकें
    const touch = e.touches[0];
    box.style.left = (touch.clientX - offsetX) + 'px';
    box.style.top = (touch.clientY - offsetY) + 'px';
}, { passive: false });

document.addEventListener('touchend', () => {
    isDragging = false;
});