检查光标何时悬停在链接上（尤其是 YouTube 链接）答案

【问题标题】：Check when the cursor hovers over a link (Particularly a YouTube link)检查光标何时悬停在链接上（尤其是 YouTube 链接）
【发布时间】：2020-02-04 19:43:26
【问题描述】：

当鼠标光标悬停在链接（在本例中为 YouTube 链接）上时，我想显示悬停在控制台中的链接。现在这就是我所拥有的。

window.onload = () => {
    var links = document.querySelectorAll('[href*="https://www.youtube.com/watch?v="],[href*="https://youtu.be/"]'); //This will selecet an element with a href that has a link that involve either https://youtu.be/ or https://www.youtube.com/watch?v= in the link (Meaning YouTube video links)
    links.forEach(link => {
        link.addEventListener("mouseenter", () => {
            console.log(`Link: ${link} hovered over.`)
        });
    });
}

此代码的工作原理是，当网站启动或重新加载时，它将检查任何具有 href 的元素，该元素的链接具有 https://www.youtube.com/watch?v= 或 https://youtu.be/ 基本上是一个 youtube 视频然后保存这些链接，当其中一个我悬停在上面时，它会告诉你是哪个。这工作正常，但我目前面临的一个缺点是在网站已经启动或重新加载后添加的新链接不会被计算在内，因此当我将它们悬停时它不会显示链接，我指 cmets；例如，如果我发表带有视频链接的评论，则在我发布该 cmets 并将鼠标悬停在我发布的该链接上后，它不会显示该链接。我可以创建一个每隔 5 秒重新加载一次的函数，但这似乎不是一个好主意。 Plkus 我实际上正在做的事情，每次重新加载都不会很好。无论如何要这样做？ 我为这个长篇大论道歉。 :)

【问题讨论】：

试试这个stackoverflow.com/questions/3219758/detect-changes-in-the-dom

标签： javascript html css

【解决方案1】：

您可以将事件侦听器添加到您知道将包含所有链接的父元素中，而不是将其添加到每个链接中。该事件将被传递（委托），您可以在event.relatedTarget 中找到悬停的链接。

您必须使用“mouseover”事件而不是“mouseenter”来获取孩子。此外，网越宽，性能影响越大。所以把事件委托给你能做到的最近的祖先。

编辑为在鼠标进入链接时运行脚本。

const container = document.querySelector('.container')

container.addEventListener('mouseover', ev => {
  const target = ev.relatedTarget
  if (target && target.tagName === 'A') {
    alert(
      `Link: ${target.getAttribute('href')} hovered over.`)
  }
})

const otherContainer = document.querySelector('.other-container')

otherContainer.addEventListener('mouseover', ev => {
  const target = ev.path[0]
  if (target && target.tagName === 'A') {
    alert(
      `Now it targets when entering ${target.getAttribute('href')}.`)
  }
})

<div class="container">
  <a href="http://example.com" target="_blank">runs when mouse leaves</a>
</div>

<div class="other-container">
  <a href="http://example.com" target="_blank">runs when mouse enters</a>
</div>

【讨论】：

这可以正常工作，但问题是onmouseover 在光标离开它悬停的链接后发送消息。另一方面，onmouseenter 在光标悬停在元素上之后立即发送消息。我正在做的事情要求它应该在链接悬停之后而不是在它离开之后完成。无论如何，至少要使用onmouseenter？
当然。保留事件“鼠标悬停”，而不是检查“event.relatedTarget”，而是检查event.path[0]。有帮助吗？

【解决方案2】：

您可以采取的一种方法是将事件侦听器附加到文档本身，并测试event.target 以查看它是否与您要查找的选择器匹配。

document.addEventListener('mouseover', (e) => {
    if(e.target.closest('[href*="https://www.youtube.com/watch?v="],[href*="https://youtu.be/"]') !== null) {
        console.log(e.target)
    }
})

您可能需要在某些较旧的浏览器中填充 Element.closest

【讨论】：