我的小程序
指尖壁纸
指尖卡路里
指尖待办
每日一笑
理想是火，点燃熄灭的灯。
随机推荐
react-redux useSelector的坑 148
setState()异步 同步 170
表单方式文件上传和获取文件属性 291
git操作日常记录学习 242
vue中slot的使用场景 268
发起一个网络请求中间发生的过程 196标签云
我和我家宝
我们相恋了：
10000年
10000年
模拟用户的Hover操作
随笔 300 2021-08-10 15:03
需求是我们想去模拟用户的hover事件，
大家都知道 click的事件是很好模拟的
直接dom.click(),
但是hover是css的伪类，
所以需要通过onmouseover，onmouseleaver事件来模拟
发现新世界大门，通过原生的dispatchEvent来触发我们的事件
废话不多说直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<h1>模拟鼠标悬停</h1>
<hr />
<div id="name">My Name</div>
</head>
<body>
<script>
var element = document.getElementById("name");
element.addEventListener("mouseover", function () {
element.style.color = "red";
console.log("Event triggered");
});
element.addEventListener("mouseleaver", function () {
element.style.color = "black";
console.log("Event triggered");
});
var event = new MouseEvent("mouseover", {
view: window,
bubbles: true,
cancelable: true,
});
var event2 = new MouseEvent("mouseleaver", {
view: window,
bubbles: true,
cancelable: true,
});
element.dispatchEvent(event);
// 两秒后触发mouseLeaver事件
setTimeout(() => {
console.log("两秒后触发mouseLeaver事件");
element.dispatchEvent(event2);
}, 2000);
</script>
</body>
</html>
作者: Bill 本文地址: http://biaoblog.cn/info?id=1628579025551
版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！
上一篇：2021年的第一篇随笔