博客

jQuery event.relatedTarget属性

  • Post category:jquery

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属性返回的是与事件相关的元素，可能是鼠标指针进入或离开的元素，也可能是与事件相关的其他元素。
Tags: