JavaScript实现按键精灵

最新推荐文章于 2023-12-21 14:08:58 发布

ftxv95x5

最新推荐文章于 2023-12-21 14:08:58 发布

阅读量547

点赞数

本文链接：https://blog.csdn.net/ftxv95x5/article/details/56480535

版权

本文介绍如何使用JavaScript实现模拟鼠标点击、触屏滑动和焦点切换等操作，以模拟真实用户的行为。详细讲解了MouseEvent、TouchEvent和FocusEvent的相关事件和接口，包括它们的初始化参数和使用示例。

摘要由CSDN通过智能技术生成

最近有个需求，需要在页面上面自动点击、输入、提交。

用以模拟真实用户的操作行为，可以通过直接执行某个元素绑定的事件，来执行操作。

也可以创建事件，再派发事件，执行操作。关于事件的更多细节，可以参考《JavaScript中事件处理》

1、模拟MouseEvent中的click事件，x与y位置随机点击

2、模拟TouchEvent中的touchstart和touchmove，用scroll来做滑动效果

3、模拟FocusEvent，聚焦到屏幕中的输入框内

一、鼠标事件MouseEvent

MouseEvent接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。

MouseEvent派生自 UIEvent，UIEvent 派生自 Event。

function random(max) {
    return Math.floor(Math.random() * max);
}
function on(dom, type, fn) {
    dom.addEventListener(type, fn, false);
}
on(document.body, 'click', function(e) {
    console.log('click事件 x:'+e.clientX, 'y:'+e.clientY);
});
/**
 * MouseEvent
 * 包括事件 click，dblclick，mouseup，mousedown
 */
function mouse() {
    var x = random(window.outerWidth),
        y = random(window.outerHeight);
    var event = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
        clientX: x,
        clientY: y
    });
    console.log('click环境 x:'+x, 'y:'+y);
    document.body.dispatchEvent(event);
}
mouse();

1）Event

语法如下：

typeArg：事件的名字，DOMString类型。

eventInit：

属性	选项	默认	类型	描述
bubbles	可选	false	Boolean	事件是否冒泡
cancelable	可选	false	Boolean	事件是否可取消
scoped	可选		Boolean	indicating whether the given event bubbles. If this value is true, deepPath will only contain a target node.
composed	可选	false	Boolean	事件是否会影子根(shadow root)之外触发侦听器。 Shadow DOM是指在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。