jQuery event.relatedTarget
属性返回与事件相关的元素。该属性通常用于在鼠标事件处理程序中获取鼠标指针进入或离开的元素。
以下是jQuery event.relatedTarget
属性的详细攻略:
语法
event.relatedTarget
参数
无
示例1:获取鼠标指针进入或离开的元素
以下示例演示了如何使用jQuery event.relatedTarget
属性获取鼠标指针进入或离开的元素:
<!DOCTYPE html>
<html>
<head>
<title>jQuery event.relatedTarget Property</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script>
$('#myDiv').on('mouseenter mouseleave', function(event) {
var relatedTarget = event.relatedTarget;
if (relatedTarget) {
$('#myDiv').text('Mouse entered or left ' + relatedTarget.tagName);
} else {
$('#myDiv').text('Mouse entered or left the document');
}
});
</script>
</body>
</html>
在上述示例中,我们创建了一个div
元素,并在该元素上绑定了mouseenter
和mouseleave
事件。在事件处理程序中,我们使用jQuery event.relatedTarget
属性获取鼠标指针进入或离开的元素,并将其显示在div
元素中。
示例2:在鼠标点击事件中获取相关元素
以下示例演示了如何在鼠标点击事件中使用jQuery event.relatedTarget
属性获取相关元素:
<!DOCTYPE html>
<html>
<head>
<title>jQuery event.relatedTarget</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="#" id="myLink">Click me</a>
<div id="myDiv"></div>
<script>
$('#myLink').on('click', function(event) {
var relatedTarget = event.relatedTarget;
if (relatedTarget) {
$('#myDiv').text('Clicked on ' + this.tagName + ', related element is ' + relatedTarget.tagName);
} else {
$('#myDiv').text('Clicked on ' + this.tagName + ', no related element');
}
});
</script>
</body>
</html>
在上述示例中,我们创建了一个链接和一个div
元素,并在链接上绑定了一个click
事件。在事件处理程序中,我们使用jQuery event.relatedTarget
属性获取相关元素,并将其显示在div
元素中。
注意事项
jQuery event.relatedTarget
属性只能在鼠标事件处理程序中使用。- `jQuery event.relatedTarget属性返回的是与事件相关的元素,可能是鼠标指针进入或离开的元素,也可能是与事件相关的其他元素。