คุณสมบัติ HTML DOM MouseEvent offsetX

คุณสมบัติ HTML DOM MouseEvent offsetX ส่งคืนพิกัดแนวนอน (x) ของตัวชี้เมาส์สัมพัทธ์กับ target element หากมีการกระตุ้น mouse event ใช้ร่วมกับ offsetY เพื่อรับพิกัดแนวตั้ง

ไวยากรณ์ (Syntax)

การส่งคืนอ้างอิงไปยังออบเจ็กต์ offsetX:

MouseEventObject.offsetX

ตัวอย่างการใช้งาน

<!DOCTYPE html> <html> <head> <title>MouseEvent offsetX</title> <style> 
    * { 
        padding: 2px; 
        margin: 5px; 
    } 
    form { 
        width: 70%; 
        margin: 0 auto; 
        text-align: center; 
    } 
    #outer { 
        width: 70%; 
        margin: 0 auto; 
        padding: 0; 
        text-align: center; 
        border: 1px solid black; 
        height: 105px; 
        background-color: #28a745; 
    } 
    input[type="button"] { 
        border-radius: 10px; 
    } 
    #upper { 
        border-bottom: 1px solid black; 
        height: 40px; 
        margin: 0 0 15px 0; 
        background-color: #DC3545; 
    } 
    #lower { 
        border-top: 1px solid black; 
        height: 40px; 
        margin: 15px 0 0 0; 
        background-color: #DC3545; 
    } 
</style> </head> <body> 
    <form> 
        <fieldset> 
            <legend>MouseEvent-offsetX</legend> 
            <div id="outer"> 
                <div id="upper"><h2>Danger</h2></div> 
                <div id="lower"><h2>Danger</h2></div> 
            </div> 
            <input type="button" id="start" value="Start" onclick="gameStart()"> 
            <div id="divDisplay"></div> 
        </fieldset> 
    </form> 
    <script> 
        var divDisplay = document.getElementById('divDisplay'); 
        var gameDisplay = document.getElementById('outer'); 
        function playGame(event) { 
            var x = event.offsetX; 
            var y = event.offsetY; 
            if(y > 45 && y < 60) { 
                divDisplay.textContent = 'Keep Going!'; 
                if(x === 272) { 
                    divDisplay.textContent = 'Congrats! You Did it!'; 
                    gameDisplay.removeEventListener('mousemove', playGame); 
                } 
            } else { 
                divDisplay.textContent = 'You moved to DANGER area. You loose!'; 
                gameDisplay.removeEventListener('mousemove', playGame); 
            } 
        } 
        function gameStart() { 
            gameDisplay.addEventListener('mousemove', playGame); 
        } 
    </script> 
</body> </html>

ผลลัพธ์

หลังจากคลิกปุ่ม 'Start' และเคอร์เซอร์อยู่ในพื้นที่สีเขียว (ปลอดภัย):

หลังจากคลิกปุ่ม 'Start' และเคอร์เซอร์อยู่ปลายพื้นที่สีเขียว (ปลอดภัย):

หลังจากคลิกปุ่ม 'Start' และเคอร์เซอร์อยู่ในพื้นที่สีแดง (อันตราย):