有没有办法在开发人员工具中模拟onmouseover？

Question

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

有没有办法模拟onmouseover提升？

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

我没有为此目的找到任何扩展名。提前谢谢。

Answer 1

您可以使用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>

下面的onmouseover-event设置为<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可能与旧浏览器中的支持有关。

Answer 2

是的，因为您已在图像中选择了它，所以只能使用dispatchEvent方法，前提是您必须事先在chrome控制台中创建事件并执行。

1. 预创建：hover 事件

var event = new MouseEvent("mouseover");

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

$0.dispatchEvent(event)