javascript-实现鼠标事件模拟

最新推荐文章于 2025-06-16 18:19:19 发布

原创最新推荐文章于 2025-06-16 18:19:19 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#事件模拟 #鼠标事件模拟 #事件模拟兼容

javascript 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个使用JavaScript模拟鼠标点击事件的方法。通过创建不同浏览器版本适用的事件对象，并触发指定元素的点击事件，演示了如何在按钮上实现这一功能。特别针对IE8及以下版本和IE9及以上版本以及其他现代浏览器提供了不同的事件模拟方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标事件模拟

鼠标事件模拟
- 函数库
- 点击事件

函数库

EventUtil.js
BrowserUtil.js

点击事件

<p>
    <button id="btn1">按钮1</button>
</p>
<p>
    <button id="btn2">按钮2</button>
</p>
<script>
    (function(){
        var btn1 = document.querySelector('#btn1');
        var btn2 = document.querySelector('#btn2');
        EventUtil.addHandler(btn1, 'click', function (event) {
            event = EventUtil.getEvent(event);
            alert('btn1');
            alert(event.screenY);
        });
        EventUtil.addHandler(btn2, 'click', function (event) {
            var browser = BrowserUtil.browserVersion()
            if (browser.name === 'ie' && +browser.version <= 8) {
                // IE8鼠标事件模拟
                event = document.createEventObject();
                event.screenX = 0;
                event.screenY = 100;
                event.clientX = 0;
                event.clientY = 0;
                event.ctrlKey = false;
                event.altKey = false;
                event.shiftKey = false;
                event.button = 0;
                btn1.fireEvent('onclick', event);
            } else {
                // IE9及以上和常用浏览器的鼠标事件模拟
                event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, true, document.defaultView, 0, 0, 100, 0, 0, false, false, false, false, 0, btn2);
                btn1.dispatchEvent(event);
            }
        })
    })()
</script>