前端自动触发事件-鼠标悬停/点击/移出

最新推荐文章于 2024-03-13 08:15:00 发布

瑶山

最新推荐文章于 2024-03-13 08:15:00 发布

阅读量2.4k

点赞数 1

分类专栏： H5 文章标签： js jquery html 自动 web api

本文链接：https://blog.csdn.net/qq_44695727/article/details/118387392

版权

H5 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

测试页面代码

Web API文档

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title></title>
</head>
<body>
    <div id="button" class="button" >Button</div>
    name<input id="input" />
</body>

<script type="text/javascript">
    $(function(){
        $(".button").each(function(){
            // 单击事件
            $(this).click(function(){
                alert("text click");
                console.log("点击")
            });
            // 鼠标指针位于元素上方
            $(this).mouseover(function(){
                alert("div mouseover");
                console.log("鼠标指针移动到元素上方")
            });
            // 当鼠标指针离开被选元素时
            $(this).mouseout(function(){
                alert("div mouseout");
            });
        });

        // 页面加载调用
        autoClick("button")
        // 获取页面id=input元素输入
        document.getElementById("input").value="自动输入"
    });


    // Web API文档：https://developer.mozilla.org/zh-CN/docs/Web/API
    //自动点击的方法 clickId 点击事件的id属性值  字符串类型
    function autoClick(clickId) {
        // IE
        // if (document.all) {
        //  document.getElementById(clickId).click();
        // }
        // 其它浏览器
        var e = document.createEvent("MouseEvents"); // 获取鼠标元素

        // 模拟鼠标悬浮
        e.initEvent("mouseover", true, true);// 三个参数 初始化一个鼠标事件，可以向上冒泡，可以被取消
        document.getElementById(clickId).dispatchEvent(e);

        // 模拟鼠标点击
        e.initEvent("click", true, true);
        document.getElementById(clickId).dispatchEvent(e);

        // 模拟鼠标点击
        e.initEvent("mouseout", true, true);
        document.getElementById(clickId).dispatchEvent(e);
    }
</script>

<style>
    .button {
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
        margin: 20px;
        text-align: center;
        line-height: 200px;
    }
</style>
</html>

效果：

瑶山

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端自动触发事件-鼠标悬停/点击/移出

测试页面<!DOCTYPE html><html><head lang="zh-CN"> <meta charset="UTF-8"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫