如何在网页端用js模拟鼠标移动点击等操作

gg22g2
  • 106

网页端没有直接的api可以实现鼠标点击,移动等操作。
我目前的思路是,自己创建点击,移动等事件,然后通过元素的dispatchEvent方法,直接把事件发给目标元素。但是这种方式非常麻烦,需要先找到监听鼠标操作的元素,然后才能用dispatchEvent方法,没有通用性,有没有更好的思路或方法。
三种操作的封装

function creatpointerdown(x, y, offsetX, offsetY) {
    let downEvent = new PointerEvent("pointerdown", {
        pointerId: 1,
        bubbles: true, //如果事件是冒泡类型,则返回 true,否则返回 fasle。
        button: 0, // 按下 0(通常是左按钮)  移动时为-1
        buttons: 1, // pointerdown 1(通常是左键)   pointerup时候为 0(没有键被按下)
        cancelable: true, //如果用 preventDefault() 方法可以取消与事件关联的默认动作,则为 true,否则为 fasle。
        composed: true, //用来指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。
        pointerType: "mouse",
        which: 1, //按下和抬起为1  移动时为0
        width: 1, //触摸的物体,与屏幕接触的面积
        height: 1, //触摸的物体,与屏幕接触的面积
        isPrimary: true, //是否为主指针
        isTrusted: true, //是否可信任  判断是脚本操作还是真人操作 ,其实并不能设置,脚本操作则为false
        tiltX: 0, //Y和Z轴的角度 -90到90度
        tiltY: 0,
        view: document.defaultView, //与事件关联的窗口
        clientX: x,
        clientY: y,
        screenX: x, //鼠标在屏幕上的x坐标
        screenY: y + 71, //鼠标在屏幕上的y坐标
        movementX: 0,
        movementY: 0,
        pressure: 0.5 //压力  鼠标点击时为 0.5  鼠标按下为抬起移动时为0  抬起了移动时为0
    });
    return downEvent;
}


//按下时移动
function creatpointermove(x, y, offsetX, offsetY) {

    let moveEvent = new PointerEvent("pointermove", {
        pointerId: 1,
        bubbles: true, //如果事件是冒泡类型,则返回 true,否则返回 fasle。
        button: -1, // 按下 0(通常是左按钮)  移动时为-1
        buttons: 1, // pointerdown 1(通常是左键)   pointerup时候为 0(没有键被按下)
        cancelable: true, //如果用 preventDefault() 方法可以取消与事件关联的默认动作,则为 true,否则为 fasle。
        composed: true, //用来指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。
        pointerType: "mouse",
        which: 0, //按下和抬起为1  移动时为0
        width: 1, //触摸的物体,与屏幕接触的面积
        height: 1, //触摸的物体,与屏幕接触的面积
        isPrimary: true,
        tiltX: 0,
        tiltY: 0,
        view: document.defaultView, //与事件关联的窗口
        clientX: x,
        clientY: y,
        screenX: x, //鼠标在屏幕上的x坐标
        screenY: y + 71, //鼠标在屏幕上的y坐标
        movementX: offsetX,
        movementY: offsetY,
        pressure: 0.5 //压力  鼠标点击时为 0.5  鼠标按下为抬起移动时为0  抬起了移动时为0  抬起时为0
    });

    return moveEvent;
}



function creatpointerup(x, y, offsetX, offsetY) {

    let upEvent = new PointerEvent("pointerup", {
        pointerId: 1,
        bubbles: true, //如果事件是冒泡类型,则返回 true,否则返回 fasle。
        button: -1, // 按下 0(通常是左按钮)  移动时为-1
        buttons: 0, // pointerdown 1(通常是左键)   pointerup时候为 0(没有键被按下)
        cancelable: true, //如果用 preventDefault() 方法可以取消与事件关联的默认动作,则为 true,否则为 fasle。
        composed: true, //用来指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。
        pointerType: "mouse",
        which: 1, //按下和抬起为1  移动时为0
        width: 1, //触摸的物体,与屏幕接触的面积
        height: 1, //触摸的物体,与屏幕接触的面积
        isPrimary: true,
        tiltX: 0,
        tiltY: 0,
        view: document.defaultView, //与事件关联的窗口
        clientX: x,
        clientY: y,
        screenX: x, //鼠标在屏幕上的x坐标
        screenY: y + 71, //鼠标在屏幕上的y坐标
        movementX: offsetX,
        movementY: offsetY,
        pressure: 0 //压力  鼠标点击时为 0.5  鼠标按下为抬起移动时为0  抬起了移动时为0  抬起时为0
    });

    return upEvent;
}
回复
阅读 1.9k
1 个回答

这个问题的关键点在于如何准确的拿到目标元素。如果你是模拟了一个鼠标指针在页面上移动,那么你只有指针的坐标信息,该如何通过坐标信息拿到对应位置的元素,这个目前可能无法实现。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏