清除选中的内容防止选择拖动

2018-07-11 03:56:19来源：博客园阅读 ()

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