jQuery | event.relatedTarget 属性与示例

在 jQuery 事件处理函数中，event.relatedTarget 属性可用于获取鼠标事件的相关元素。这个属性只在 mouseover 和 mouseout 事件中有效，它可以告诉开发者鼠标来自哪个元素，或鼠标移动到哪个元素上。

语法

以下是 event.relatedTarget 属性的语法：

event.relatedTarget

返回值

event.relatedTarget 会返回相关的 DOM 元素。如果事件类型是 mouseover，则它会返回移动到的目标元素；如果事件类型是 mouseout，则它会返回离开的目标元素。

示例

以下是一个简单示例，展示了如何在 mouseover 和 mouseout 事件中使用 event.relatedTarget 属性获取相关元素：

$( "div.box" ).on( "mouseover mouseout", function( event ) {
  if ( event.type === "mouseover" ) {
    $( this ).text( "Mouse over" );
    $( event.relatedTarget ).text( "Mouse over from " + $( event.relatedTarget ).attr( "class" ) );
  } else {
    $( this ).text( "Mouse out" );
    $( event.relatedTarget ).text( "Mouse out to " + $( event.relatedTarget ).attr( "class" ) );
  }
});

在这个示例中，当鼠标移动到一个带有 box 类的 div 元素上时，div 中的文本会被改为 Mouse over，并且 event.relatedTarget 属性的值会被用于展示鼠标来自哪个元素。同样地，当鼠标离开这个元素时，div 中的文本会被改为 Mouse out，event.relatedTarget 属性的值也会被用于展示鼠标移开到了哪个元素。

注意事项

需要注意的是，当鼠标从浏览器窗口外移入元素后，event.relatedTarget 的值会变为 null。因此，需要在使用 event.relatedTarget 属性时进行空值检查。