有什么方法可以在开发者工具中模拟 onmouseover 吗？

Question

我知道 Firefox 可以模拟悬停、活动和焦点过滤器。

有什么方法可以模拟onmouseover海拔？

我想在两个元素中一起模拟这个，可以吗？

我没有找到任何用于此目的的扩展程序。提前谢谢你。

Answer 1

是的，因为它在您的图像中被选中，您可以使用 dispatchEvent 方法，但您必须事先在 chrome 控制台中创建事件并执行它。

1. 预创建 :hover 事件

var event = new MouseEvent("mouseover");

1. 您将事件发送到 DOM 元素，其中 $0 是您在浏览器的调试器中选择的元素（在您的情况下是带有类 facebox 的 div）

$0.dispatchEvent(event)

Answer 2

您可以使用 dispatch 为元素发送/触发事件：element.dispatchEvent(event);。不同浏览器和版本上的support may vary； my demo on jsfiddle 在 chrome 65 上工作。

给定这个 html

<div id="menu">
  <h3>Menu</h3>
  <div>Sample to fire onmouseover using a script</div>
  <ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
  </ul>
</div>
<button onclick="simulateMouseOver()">simulate onMouseOver</button>

在鼠标悬停事件下方设置了<div id=menu>。一旦鼠标移到 div 上，事件就会触发：

var menu =  document.getElementById("menu");
menu.addEventListener("mouseover", function(event){   

    event.target.style.backgroundColor = "blue";
    setTimeout(function() {
      event.target.style.backgroundColor = "";
    }, 500);
}, false)();

要从脚本内部引发 onmouseover-event

1. 首先必须创建正确的事件
2. 然后触发/分派此事件到目标元素

查看此代码

function simulateMouseOver() {
  var listItems = document.querySelectorAll("ul li")
    var item1 = listItems.item(1);
  var event = new MouseEvent('mouseover', 
       {view: window, bubbles: true, cancelable: true});

  var cancelled = !item1.dispatchEvent(event);
  if (cancelled) {
    // a handler called preventDefault.

  } else {
    // none of the handlers called preventDefault.

  }
}

您可以在

找到更多信息

• MDN dispatch event
• MDN event mouseover

question simulate a mouse click from 2011 或 Trigger events in javascript from 2010 对于旧浏览器的支持可能有用。