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

时间 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

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

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