jQuery | event.relatedTarget 属性与示例

在jQuery中，每个事件对象都包含了一个 relatedTarget 属性，它代表了当前事件的相关目标。这个属性通常被用于处理鼠标事件。

语法

以下是 relatedTarget 属性的基本语法：

event.relatedTarget

说明

• 如果事件是由鼠标事件触发（例如 mouseover 或 mouseout），则 relatedTarget 属性将包含导致事件触发的元素（即前一元素或后一元素）。否则，这个属性将为 null。

示例

以下是一些示例，展示了如何使用 relatedTarget 属性。

示例 1：鼠标进入/离开元素

以下示例展示了如何在鼠标进入和离开元素时使用 relatedTarget 属性。

$("p").on("mouseover", function(event) {
  console.log("Mouse enter:", event.relatedTarget);
});

$("p").on("mouseout", function(event) {
  console.log("Mouse leave:", event.relatedTarget);
});

示例 2：鼠标点击元素

以下示例展示了如何在鼠标点击元素时使用 relatedTarget 属性。

$("p").on("click", function(event) {
  console.log("Clicked on:", this);
  console.log("Related target:", event.relatedTarget);
});

以上示例将在点击段落时将 this 输出到控制台，同时也将输出相关目标。

结语

relatedTarget 属性是一个非常有用的属性，在处理鼠标事件时非常有用。希望这篇文章能够帮助你理解和应用它！