模拟用户的Hover操作
模拟用户的Hover操作
biaoblog.cn 个人博客
发布于 2022-08-11 19:27:42
发布于 2022-08-11 19:27:42
需求是我们想去模拟用户的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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读