一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    模拟用户的Hover操作

    随笔 249 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>
    
    


    参考文档:https://www.jianshu.com/p/5f9027722204

    https://www.imooc.com/wenda/detail/579555

    文章评论

    评论列表(0