Question

我想知道event.target和event.relatedTarget之间的区别。以下是拖放活动的代码块。

  ondragleave: function (event) {
    // remove the drop feedback style
    event.target.classList.remove('drop-target');
    event.relatedTarget.classList.remove('can-drop');
    event.relatedTarget.textContent = 'Dragged out';

  }

Answer 1

某些事件使用relatedTarget事件目标来指定辅助目标。另一方面，大多数DOM事件将使用目标来指定事件的主要目标。

例如，在focus事件期间，target将成为获得焦点的元素，而relatedTarget将成为失去焦点的元素。

您可以在此处查看指定relatedTarget的详尽DOM事件列表：MouseEvent.relatedTarget.

回答here

从上面的解释来看，我们可以说

<div class="outer">
  <div class="inner"></div>
</div>

在这个例子中，当你将鼠标悬停在内部div中时，然后在处理程序中：

event.target指的是.inner元素（这会给你元素事件起源的地方）
event.relatedTarget指的是.outer元素（这为你提供了首先接收焦点并将焦点放在其他元素上的元素）

您可以查看此fiddle以便更好地理解

现在在你自己的场景中

ondragleave: function (event) {
    /*when the dragged element leaves the drop target, remove the 
    .drop-target class from the current focused element*/
    event.target.classList.remove('drop-target');

    /*remove the .can-drop class from the element that looses focus 
    to the current focused element and changed the text to Dragged Out*/
    event.relatedTarget.classList.remove('can-drop');
    event.relatedTarget.textContent = 'Dragged out';

  }

感谢。

event.target vs event.relatedTarget

1 个答案: