有什么方法可以在开发人员工具中模拟onmouseover吗？
何塞·塞罗迪奥
我知道Firefox提供了一种模拟悬停，活动和焦点过滤器的方法。
有什么方法可以模拟onmouseover高程吗？
我想一起模拟两个元素，这可能吗？
我没有为此目的找到任何扩展。先感谢您。
偷渡
您可以使用dispatch来发送/触发某个元素的事件element.dispatchEvent(event);。在不同的浏览器和版本上，支持可能会有所不同；我在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
- 首先必须创建正确的事件
- 然后触发/将此事件发送到目标元素
看到这个代码
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.
}
}
您可以在以下找到更多信息
该问题模拟了2011年的鼠标单击或2010年以来的javascript中的Trigger事件，这可能与旧版浏览器的支持有关。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
有什么方法可以在开发人员工具中模拟onmouseover吗？
- 2
使用开发人员工具模拟JavaScript事件？
- 3
有没有一种方法可以在浏览器中显示图像而不在开发人员工具中预览图像？
- 4
在chrome开发人员工具中调试插件
- 5
开发人员工具中的IE 11 cookie
- 6
Chrome开发人员工具中的HTTP请求
- 7
Android开发人员工具中的警告-Eclipse
- 8
让React开发人员工具在Chrome中运行
- 9
Chrome开发人员工具中是否有键盘快捷键可以切换源文件？
- 10
有没有一种简单的方法可以在使用开发人员工具时快速禁用Chrome中的扩展程序？
- 11
是否可以在开发人员工具中查看chrome.storage.local？
- 12
为什么 Inspector 开发人员工具不能反映所有代码？
- 13
Google Chrome开发人员工具中的“用户样式表”是什么？
- 14
Firefox开发人员工具中3D视图的用例是什么
- 15
每行代码结束之后，开发人员工具中的== $ 0是什么？
- 16
为什么在开发人员工具中显示的styles.css被取消？
- 17
为什么在开发人员工具中某些HTML元素会变灰？
- 18
Google Chrome开发人员工具中的“用户样式表”是什么？
- 19
Firefox开发人员工具中3D视图的用例是什么
- 20
每行代码结束之后，开发人员工具中的== $ 0是什么？
- 21
“ Microsoft Office开发人员工具”和“用于Office的Visual Studio工具”之间有什么区别
- 22
Chrome开发人员工具-我可以一直启用漂亮的打印功能吗？
- 23
MS Edge开发人员工具模拟器无法正常工作
- 24
是否可以使用浏览器的开发人员工具搜索所有出现的属性？
- 25
“Firefox 开发人员工具”>“网络”中没有状态代码的原始标头，这是一个错误吗？
- 26
macOS Catalina上的Safari-开发人员工具中缺少“调试器”选项卡吗？
- 27
有没有办法在Chrome开发人员工具中显示所有已定义的className？
- 28
为什么Chrome开发人员工具有时不显示CSS源代码？
- 29
IE11开发人员工具中的“始终从服务器刷新”发生了什么？
我来说两句