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

72 阅读 0 评论 48 点赞

我是靠谱客的博主畅快夕阳，这篇文章主要介绍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-49
                    minusX = 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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-49
                    minusX = 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>