清除选中的内容 防止选择拖动
程序员文章站
2022-11-17 07:51:52
水平滚动条 0px 进度:0% 小伙伴们可以测试一下 有时候鼠标抬起的时候 它还是会执行mousemove所操作的事情导致抬起鼠标 移动鼠标 进度变化想要解决这个Bug 就需要清除选中的内容 window.getSelection?window.ge... ......
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>水平滚动条</title> <style type="text/css"> .box{ width:300px; height:10px; background:#ff6633; margin:50px auto; position:relative; } .progress{ width:15px; height:30px; background:#6600cc; position:absolute; top:-9px; left:0; cursor:pointer; } .bg{ position:absolute; background:#6600cc; width:0; height:10px; left:0; top:0; } .message{ height:50px; position:absolute; top:30px; left:100px; } </style> </head> <body> <div class="box"> <div class="bg"></div> <div class="progress"></div> <div class="message"> 0px 进度:0% </div> </div> <script type="text/javascript"> var pg=document.querySelector(".progress"); var box=pg.parentNode; var bg=pg.previousElementSibling; var message=box.children[2]; pg.onmousedown=function(){ var that=this; var leftVal=event.clientX-this.offsetLeft; document.onmousemove=function(event){ var event=event||window.event; var left=event.clientX-leftVal; window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); if(left>=box.offsetWidth){ left=box.offsetWidth; } else if(left<=0){ left=0; } that.style.left=left+"px"; bg.style.width=left+"px"; var str=parseInt(left)+"px "; str+=parseInt(left/box.offsetWidth*100)+"%"; message.innerHTML=str; } document.onmouseup=function() { document.onmousemove=null; } } </script> </body> </html>
小伙伴们可以测试一下 有时候鼠标抬起的时候 它还是会执行mousemove所操作的事情
导致抬起鼠标 移动鼠标 进度变化
想要解决这个Bug 就需要清除选中的内容
window.getSelection?window.getSelection.removeAllRange():document.selection.empty();
前面的方法是标准浏览器 后面的IE的 就是做一下兼容
下一篇: ps中怎么设计漂亮的小铅笔图标?