700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html 模拟鼠标移动 如何在网页端用js模拟鼠标移动点击等操作

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

时间:2020-07-25 23:51:22

相关推荐

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

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

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。