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

Question

我知道 Firefox 有模拟悬停、活动和焦点过滤器的方法。

有什么方法可以模拟onmouseover高程吗？

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

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

Answer 1

您可以使用 dispatch 为元素发送/触发事件：element.dispatchEvent(event);。 support may vary on different browsers and versions; 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，您

首先必须创建正确的事件
然后触发/分派此事件到 target-element

查看此代码

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.

  }
}

您可以在

找到更多信息

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

Answer 2

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

pre-create :悬停 事件

var event = new MouseEvent("mouseover");

您将事件发送到 DOM 元素，其中 [=13=] 是您在浏览器调试器中选择的元素（在您的情况下是 div 和 class脸箱)

[=11=].dispatchEvent(event)

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

Is there any way to simulate onmouseover in Developer Tools?

javascript

firefox

onmouseover

firefox-developer-tools