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

คุณสมบัติ HTML DOM MouseEvent relatedTarget ส่งคืนองค์ประกอบที่เกี่ยวข้องซึ่งกระตุ้น mouseover หรือ mouseout event ตามลำดับ

ไวยากรณ์ (Syntax)

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

MouseEventObject.relatedTarget

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

<!DOCTYPE html> <html> <head> <title>MouseEvent relatedTarget</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-relatedTarget</legend> 
            <div id="outer" onmouseout="gameStart(event)"> 
                <div id="upper"><h2>Danger</h2></div> 
                <div id="lower"><h2>Danger</h2></div> 
            </div> 
            <div id="divDisplay"></div> 
        </fieldset> 
    </form> 
    <script> 
        var divDisplay = document.getElementById("divDisplay"); 
        var textSelect = document.getElementById("textSelect"); 
        function gameStart(event) { 
            var fetchedID = event.relatedTarget.id; 
            if(fetchedID !== '') 
                divDisplay.textContent = 'You are hovering over ' + fetchedID + ' <div> element'; 
        } 
    </script> 
</body> </html>

ผลลัพธ์

Hover บนพื้นที่สีเขียว (ปลอดภัย):

Hover บนพื้นที่สีแดงบน (อันตราย):

Hover บนพื้นที่สีแดงล่าง (อันตราย):