查找当前和上一个悬停的节点答案

【问题标题】：Find current and previous node hovered查找当前和上一个悬停的节点
【发布时间】：2016-09-26 15:49:37
【问题描述】：

我有一个 html 列表，其中包含带有链接的子项。我想找到当前悬停的元素，以及之前悬停的元素。（不是当前悬停的项目的前一个兄弟项目，只是悬停到当前的项目）。

谢谢

【问题讨论】：

检查这个：stackoverflow.com/questions/2706701/…

【解决方案1】：

您需要在鼠标离开时存储元素，并在鼠标进入时检查它是什么。例如：

var previous;

$('div').on('mouseleave',function(event){
    previous = $(this);
});

$('div').on("mouseenter", function(event){
    console.log($(this).text(), previous.text());
})

jsFiddle

【讨论】：

【解决方案2】：

将其存储在全局变量中：

var hoveredElement; // We'll store our "previous" data here

// Add a hover listener to the UL, then delegate to the anchors 
document.querySelector('ul').addEventListener('mouseover', function(e) {
  if (e.target && e.target.matches('a')) {
    
    // If we have a previous hovered element, add it
    if (hoveredElement) {
      document.querySelector('.previous').textContent = hoveredElement
    }

    // Set the current hovered and the "new" last hovered elements to the currently hovered element
    document.querySelector('.current').textContent = hoveredElement = e.target.textContent
  }
});

<ul>
  <li>
    <a href="#">Item 1</a>
  </li>
  <li>
    <a href="#">Item 2</a>
  </li>
  <li>
    <a href="#">Item 3</a>
  </li>
</ul>
<hr />
<p>Current: <span class="current"></span></p>
<p>Previous: <span class="previous"></span></p>

【讨论】：

【解决方案3】：

纯 JavaScript

var previouslyHovered
var currentlyHovered
var previousBox = document.querySelector('.previouslyHovered')
var currentBox = document.querySelector('.currentlyHovered')

var items = document.querySelectorAll('li')

items.forEach(item => item.addEventListener('mouseover', function() {
  previouslyHovered = currentlyHovered
  previousBox.textContent = previouslyHovered
    ?previouslyHovered.textContent
    :previousBox.textContent
  
  currentlyHovered = this
  currentBox.textContent = currentlyHovered.textContent
}))

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
<div>previous
<span class="previouslyHovered">n/a</span>
</div>
<div>current
<span class="currentlyHovered">n/a</span>
</div>

【讨论】：