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

時間 2021-04-13

標籤 javascript php css html java 瀏覽器測試 this code htm 欄目 JavaScript 简体版

原文原文鏈接

<!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的 就是作一下兼容

轉載於猿2048:➭《清除選中的內容防止選擇拖動》javascript