js模拟鼠标自动滑动滑块--dispatchEvent

initMouseEvent参数

event.initMouseEvent(type, canBubble, cancelable, view,
detail, screenX, screenY, clientX, clientY,
ctrlKey, altKey, shiftKey, metaKey,
button, relatedTarget);
形参

type
设置事件类型type 的字符串，包含以下几种鼠标事件：click，mousedown，mouseup，mouseover，mousemove，mouseout。
canBubble
是否可以冒泡。取值集合见Event.bubbles。
cancelable
是否可以阻止事件默认行为。取值集合见Event.cancelable。
view
事件的AbstractView对象引用，这里其实指向window 对象。取值集合见 UIEvent.view。
detail
事件的鼠标点击数量。取值集合见Event.detail (en-US)。
screenX
事件的屏幕的x坐标。取值集合见MouseEvent.screenX。
screenY
事件的屏幕的y坐标。取值集合见MouseEvent.screenY。
clientX
事件的客户端x坐标。取值集合见MouseEvent.clientX。
clientY
事件的客户端y坐标。取值集合见MouseEvent.clientY。
ctrlKey
事件发生时 control 键是否被按下。取值集合见MouseEvent.ctrlKey。
altKey
事件发生时 alt 键是否被按下。取值集合见MouseEvent.altKey。
shiftKey
事件发生时 shift 键是否被按下。取值集合见MouseEvent.shiftKey。
metaKey
事件发生时 meta 键是否被按下。取值集合见MouseEvent.metaKey。
14.button
鼠标按键值 button。
relatedTarget
事件的相关对象。只在某些事件类型有用 (例如 mouseover ?和 mouseout)。其它的传null。

使用dispatchEvent分发事件

var evObj = document.createEvent(‘MouseEvents’);
evObj.initMouseEvent(‘mousedown’, true, true)
fireOnThis.dispatchEvent(evObj);
evObj.initMouseEvent(‘mousemove’, true, true, window, null, null, null, 261, null);
fireOnThis.dispatchEvent(evObj);
evObj.initMouseEvent(‘mouseup’, true, true)
fireOnThis.dispatchEvent(evObj);

标题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}body {user-select: none;/*禁止用户选中*/}.wrap {width: 300px;height: 40px;background-color: #e8e8e8;margin: 100px auto;text-align: center;line-height: 40px;/*border-radius: 7px;*/position: relative;}.rect {position: relative;width: 300px;height: 100%;}.rec {position: absolute;top: 0;left: 0;width: 0;height: 100%;background: #00b894;}.silde {position: absolute;top: 0;left: 0;z-index: 11;box-sizing: border-box;width: 40px;height: 40px;background: #fff;border: 1px solid #ccc;}</style>
</head><body><div class='wrap'><div class='rec'><div class='rect'>滑块验证<div class='silde'><img src="https://img-blog.csdnimg.cn/img_convert/2c7b3630606c742c1a3a8925eca0efd7.png" alt=""></div></div></div></div><script>window.onload = function() {var fireOnThis = document.querySelector('.silde');var evObj = document.createEvent('MouseEvents');evObj.initMouseEvent('mousedown', true, true)fireOnThis.dispatchEvent(evObj);evObj.initMouseEvent('mousemove', true, true, window, null, null, null, 261, null);fireOnThis.dispatchEvent(evObj);evObj.initMouseEvent('mouseup', true, true)fireOnThis.dispatchEvent(evObj);}//获取事件var silde = document.querySelector('.silde');var rec = document.querySelector('.rec');var rect = document.querySelector('.rect');var img = document.querySelector('img');var minusX; //保存变化的 X坐标（全局变量）//注册事件silde.onmousedown = function(e) { //鼠标点击事件，点击之后执行函数，获得点击位置的X坐标var initX = e.clientX; //保存初始按下位置的 X坐标；console.log("down", e); //用以测试document.onmousemove = function(e) { //鼠标移动事件console.log("move", e)var moveX = e.clientX;// var minusX = moveX - initX;    //变化的坐标（要注意作用域的问题，在这里面定义变量，在这个函数之外的函数就没法使用，所以要将minusX变成全局变量）minusX = moveX - initX;//这里注意一下，获得的minusX只是一个差值，没有单位想让 滑块的位置改变还需要加上 单位px//这个时候滑块会跟随鼠标整个页面一行的跑，价格条件判段，限制 滑块移动的区域不可以超过边框，保持left<=0。if (minusX < 0) {// silde.style.left = '0';minusX = 0;}if (minusX > 260) { //判断最大值// silde.style.left = '251';// 这里面的距离用边框长度减去 滑块的长度 300-49minusX = 260;}silde.style.left = minusX + 'px';rec.style.width = minusX + 'px';if (minusX >= 260) {rect.style.color = 'white';img.src = 'https://img-blog.csdnimg.cn/img_convert/5f486ab64b48cb31df78ea4d7a9d7289.png';document.onmousemove = null;silde.onmousedown = null;// rect.innerHTML = '验证成功';}// console.log(222,e,minusX);    //用以测试}}document.onmouseup = function(e) { //鼠标抬起事件document.onmousemove = null; //不允许鼠标移动事件发生console.log("up", e);if (minusX < 260) { //如果没有到头img.src = 'https://img-blog.csdnimg.cn/img_convert/2c7b3630606c742c1a3a8925eca0efd7.png';silde.style.left = 0; //设置一个 left值rec.style.width = 0; //绿色背景层设置宽度}}</script>
</body></html>

运行效果

js模拟鼠标自动滑动滑块--dispatchEvent相关推荐

Python 8行代码模拟鼠标自动删除微信收藏
上回我们提到了用 pyuserinput 进行模拟键盘鼠标操作,结果发现很多同学都回复无法安装成功,即便安装成功了还是存在很多问题.确实,pyuserinput存在不少问题,包括其安装的pymouse ...
利用Python模拟鼠标自动完成MM32-LINK程序下载
简介: 编写了利用Python控制MM32-LINK自动下载程序,这可以减少在开发过程中的操作. MM32-LINK在打开程序过程中,对话框的标题出现错误,"Load form file& ...
Js实现鼠标滚轮滑动监听
在别人博客的基础上改写了一个js实现鼠标滚轮事件的监听: windowAddMouseWheel(); function windowAddMouseWheel() {var scrollFunc = ...
Python 8行代码模拟鼠标自动删除微信收藏，Python帮你撩妹！
上回我们提到了用 pyuserinput 进行模拟键盘鼠标操作,结果发现很多同学都回复无法安装成功,即便安装成功了还是存在很多问题.确实,pyuserinput存在不少问题,包括其安装的pymouse ...
Js 模拟鼠标点击事件
var obj = document.getElementById('go'); if(document.all){ obj.click(); }else{ var e = document.crea ...
Qt QWebview调用JS，实现QQ邮箱自动填写输入框，模拟鼠标点击网页按钮！！
Qt QWebview调用JS,实现QQ邮箱自动填写输入框,模拟鼠标点击网页按钮!! QWebview调用JS,自动填写用户名和密码,并且JS模拟鼠标点击网页按钮. 下载地址:https://down ...
手机控制电脑之手机端模拟鼠标滑动处理
最近做了一个手机通过wifi控制电脑的小demo,其中进行鼠标移动控制的时候,出现了一些小bug,这里记录一下正确的移动方法,第一个方法也是最容易想到的,就是自己通过记忆上一次鼠标位置,计算距离偏差, ...
webdriver鼠标上下滑动
有时候我们需要对窗口显示的页面上下滑动,以显示当前正在处理的位置,这就需要用到webdriver模拟鼠标上下滑动 package test20161201;import org.openqa.sele ...
手机控制电脑之手机端模拟鼠标移动
最近做了一个手机通过wifi控制电脑的小demo,其中进行鼠标移动控制的时候,出现了一些小bug,这里记录一下正确的移动方法,第一个方法也是最容易想到的,就是自己通过记忆上一次鼠标位置,计算距离偏差, ...
【办公类-13-01】20220703python模拟鼠标删除“微信收藏“
背景需求: 模仿CSDN上已有的"python模拟鼠标删除微信收藏"的进行可行性练习. 软件准备及设置: 1.确定坐标位置的软件下载下载一个"看鼠标"的软件. ...

js模拟鼠标自动滑动滑块--dispatchEvent

initMouseEvent参数

使用dispatchEvent分发事件

标题

运行效果

js模拟鼠标自动滑动滑块--dispatchEvent相关推荐

最新文章

热门文章