使用 JavaScript 模拟/调用 .mouseover 事件答案

【问题标题】：Simulating/Call a .mouseover event with JavaScript使用 JavaScript 模拟/调用 .mouseover 事件
【发布时间】：2021-08-07 15:17:33
【问题描述】：

我希望在鼠标光标位于不同元素上时在 css 选择器上发生鼠标悬停事件。我需要通过运行 js 的谷歌标签管理器中的自定义标签来设置它。我的想法是：

(function() {   
document.getElementById("atcclick").mouseover();
})();

当我使用.click 时，可以识别单击#atcclick，效果非常好！但是使用.mouseover 不会识别鼠标悬停事件。知道我做错了什么吗？

【问题讨论】：

stackoverflow.com/questions/2228376/… 但我认为它不会触发 CSS。
你最好设置样式并添加一个类来触发相同的css。
在您发送的链接中找到了答案（见下文）。像魅力一样工作。

标签： javascript events mouseover

【解决方案1】：

好的，感谢 epascarello，我知道了，这是有效的：

(function() {   
document.getElementById('atcclick').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));
})();

【讨论】：

您需要使用mouseenter 和mouseleave，因为mouseover 会影响子节点。

【解决方案2】：

You should use .onmouseover() method instead of .mouseover().

做一些类似 -

(function() {   
document.getElementById("atcclick").onmouseover = function(){ console.log('on mouseover event')};
})();

&lt;p id="atcclick"&gt;This is demo text&lt;/p&gt;

【讨论】：

非常感谢您的回复 Vibhooti。不幸的是，这个建议不起作用。 .onmouseover 真的不能被调用，不是吗？我需要在 css 选择器上调用 mouseover 事件（由 js 脚本触发）。而实际的鼠标光标位于不同的元素上。
它就像.onmouseover(EventObjectHere)，但你仍然需要传入EventObject，所以你需要使用.dispatchEvent的方式。您的示例分配了事件，但除非发生鼠标悬停，否则不会触发它。