欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-16 10:17:46
水平滚动条 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的 就是做一下兼容