清除選中的內容防止選擇拖動

<!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的 就是作一下兼容
清除選中的內容 防止選擇拖動

清除選中的內容防止選擇拖動
