event.target对event.relatedTarget
event.target对event.relatedTarget
提问于 2016-10-25 05:15:10
我想知道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';
}
回答 1
Stack Overflow用户
发布于 2018-03-02 11:07:22
某些事件使用relatedTarget事件目标来指定次要目标。另一方面，大多数DOM事件都将使用目标来指定事件的主要目标。
例如，在focus事件期间，target将成为获得焦点的元素，而relatedTarget将成为失去焦点的元素。
您可以在此处查看指定relatedTarget的DOM事件的详尽列表：MouseEvent.relatedTarget。
答：这里
所以从上面的解释我们可以说，
<div class="outer">
<div class="inner"></div>
</div>在本例中，当您在内部div中悬停时，然后在处理程序中：
event.target引用了.inner元素(这给出了事件起源的元素)event.relatedTarget指的是.outer元素(这给出了首先接收焦点的元素，将焦点松散到其他元素)
您可以检查此小提琴以更好地理解
现在在你自己的场景中
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';
}谢谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40231860
复制相关文章
相似问题
腾讯云开发者
