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

Question

网页端没有直接的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;
}

Answer 1

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