如何使用JavaScript悬停在一个元素上？

Question

注意：我希望悬停在元素上而不是在悬停时触发事件（一种使用Javascript的自动悬停）。

我想通过在Chrome控制台中运行JS来随机回应我的Facebook帖子留言。

为此，我编写了这一行代码以测试列表中的第一个索引位置：

document.querySelectorAll('._6ijk a._6a-y')[0].click() 

当我手动悬停在一个元素上并使用以下代码时，它可以正常工作，选择器如下：

document.querySelector("[aria-label=Love]").click()

但在悬停之前，没有与"[aria-label=Love]"对应的元素。

但是，除了“喜欢”按钮以外的所有其他反应都出现在悬停“喜欢”按钮上，这让我陷入了麻烦。有没有好的解决方案来处理这种情况？

- GigaByte

---

Facebook 上的 DOM 元素是动态创建的，当你悬停在那个元素上时，会添加新的元素。 - Rishab

是的，确切地说，有没有解决方案或者说不可能呢？ - GigaByte

尝试在该元素上触发mouseenter事件，它将创建动态DOM。 - Rishab

你试过使用 onmouseover 吗？ - curious_nustian

是的，我已经尝试过了，但它没有起作用。 - GigaByte

可能是[如何在纯JavaScript中模拟触发CSS“：hover”中的鼠标悬停？]的重复问题(https://dev59.com/pGQm5IYBdhLWcg3w8Sne)。 - Joseph

Answer 1

首先，您需要创建一个事件，然后将其分派到所需的DOM元素上。

以下是如何创建一个mouseover事件：

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

然后自己为您的元素添加 eventListener。

yourelement = document.querySelector('css selector here');
yourelement.addEventListener('mouseover', function() {
      //something here
});

...最后是dispatchEvent函数

yourelement.dispatchEvent(event);

我希望它能够适用于您所尝试实现的任何内容！干杯！

- curious_nustian

---

谢谢解释，对我和其他人都会有很大帮助。 - GigaByte

Answer 2

Chrome 开发者工具 -> 控制台选项卡，输入：

定位元素，例如：

 var element = document.querySelectorAll('div.collapse.in.show .milestone-circle')[1]

将事件添加到“元素”

 element.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}))

- Ricardo De Leon