js模拟鼠标自动滑动滑块--dispatchEvent
生活随笔
收集整理的這篇文章主要介紹了
js模拟鼠标自动滑动滑块--dispatchEvent
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
initMouseEvent參數
event.initMouseEvent(type, canBubble, cancelable, view,
detail, screenX, screenY, clientX, clientY,
ctrlKey, altKey, shiftKey, metaKey,
button, relatedTarget);
形參
設置事件類型type 的字符串，包含以下幾種鼠標事件：click，mousedown，mouseup，mouseover，mousemove，mouseout。
是否可以冒泡。取值集合見Event.bubbles。
是否可以阻止事件默認行為。取值集合見Event.cancelable。
事件的AbstractView對象引用，這里其實指向window 對象。取值集合見 UIEvent.view。
事件的鼠標點擊數量。取值集合見Event.detail (en-US)。
事件的屏幕的x坐標。取值集合見MouseEvent.screenX。
事件的屏幕的y坐標。取值集合見MouseEvent.screenY。
事件的客戶端x坐標。取值集合見MouseEvent.clientX。
事件的客戶端y坐標。取值集合見MouseEvent.clientY。
事件發(fā)生時 control 鍵是否被按下。取值集合見MouseEvent.ctrlKey。
事件發(fā)生時 alt 鍵是否被按下。取值集合見MouseEvent.altKey。
事件發(fā)生時 shift 鍵是否被按下。取值集合見MouseEvent.shiftKey。
事件發(fā)生時 meta 鍵是否被按下。取值集合見MouseEvent.metaKey。
14.button
鼠標按鍵值 button。
事件的相關對象。只在某些事件類型有用 (例如 mouseover ?和 mouseout)。其它的傳null。
使用dispatchEvent分發(fā)事件
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) { //鼠標點擊事件，點擊之后執(zhí)行函數，獲得點擊位置的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//這個時候滑塊會跟隨鼠標整個頁面一行的跑，價格條件判段，限制 滑塊移動的區(qū)域不可以超過邊框，保持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; //不允許鼠標移動事件發(fā)生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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高手详解SQL性能优化十条经验
- 下一篇： oracle入库的速度能到多少_多线程能