jQuery event.relatedTarget 屬性

jQuery 的event.relatedTarget 屬性檢索在滑鼠移動期間進入或退出事件的元素和其他 DOM 元素。

例如，mouseout 事件指示正在進入的元素，而 mouseover 事件則指示正在退出的元素。

語法

以下是 jQuery event.relatedTarget 屬性的語法：

event.relatedTarget

引數

此屬性不接受任何引數。

返回值

此屬性返回在滑鼠移動期間正在進入或退出的元素。

示例 1

以下程式演示了 jQuery event.relatedTarget 屬性的用法：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/Output.7/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            padding: 10px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <p>Hover over on below element</p>
    <div>Tutorialspoint</div>
    <script>
        $('div').mouseover(function(event){
            alert("Element being exited: " + event.relatedTarget.tagName);
        });
    </script>
</body>
</html>

輸出

程式執行後，將顯示一個帶有綠色背景的框。當滑鼠指標懸停在其上時，將出現一個彈出警報，顯示正在退出的元素型別：

示例 2

以下是 jQuery event.relatedTarget 屬性的另一個示例。我們使用此屬性來檢索事件中涉及的 DOM 元素：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/Output.7/jquery.min.js"></script>
    <style>
        span{
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Mouse pointer out from the below elements.</p>
    <h1>This is heading</h1>
    <p>This is paragraph</p>
    <div>This is div</div>
    <a href="">Tutorialspoint</a>
    <span></span>
    <script>
        $('h1, p, div, a').mouseout(function(event){
            $('span').text("The element being entered: " + event.relatedTarget.tagName);
        })
    </script>
</body>
</html>

輸出

上述程式顯示多個元素，當滑鼠指標從一個元素移出時，將顯示事件中涉及的元素：

jquery_ref_events.htm

列印頁面