进度条与return false

最新推荐文章于 2019-06-05 22:43:00 发布

孤独的小色狼

最新推荐文章于 2019-06-05 22:43:00 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/qq_36864205/article/details/88405931

版权

进度条与return false

写进度条小案例：代码如下：

 
     <!DOCTYPE html> 
    
     <html lang="en"> 
    
     <head> 
    
      <meta charset="UTF-8"> 
    
      <title>进度条</title> 
    
      <style> 
    
      *{margin: 0;padding: 0;} 
    
      #box{width:800px;height:35px;background:#ccc;border-radius:5px;margin:100px auto;position:relative;line-height: 35px;} 
    
      #box #box_1{width:0px;height:100%;background:red;position:absolute;left:0;top:0;border-top-left-radius: 5px;border-bottom-left-radius: 5px;} 
    
      #box #drag{height:50px;width:25px;position:absolute;top:-7px;left:0px;border-radius:5px;background:red;cursor:pointer;} 
    
      #box #percent{position:absolute;right:-50px;top:0px;} 
    
      </style> 
    
     </head> 
    
     <body> 
    
      <div id = "box"> 
    
      <div id = "box_1"></div> 
    
      <span id = "drag"></span> 
    
      <div id="percent">0%</div> 
    
      </div> 
    
     </body> 
    
     <script> 
    
      var box = document.getElementById("box"); 
    
      var box_1 = box.children[0]; 
    
      var drag = box.children[1]; 
    
      var percent = box.children[2]; 
    
      drag.onmousedown = function(e){ 
    
      var e = e || window.event ; 
    
      var X = e.clientX - drag.offsetLeft; 
    
      document.onmousemove = function(e){b 
    
      var e = e || window.event ; 
    
      var X1 = e.clientX - X; 
    
      if(X1 < 0){ 
    
      X1 = 0; 
    
      }else if(X1 > box.offsetWidth - drag.offsetWidth){ 
    
      X1 = box.offsetWidth - drag.offsetWidth; 
    
      } 
    
      drag.style.left = X1 +"px"; 
    
      box_1.style.width = X1 +"px"; 
    
      percent.innerHTML = parseInt(X1/(box.offsetWidth-drag.offsetWidth)*100) + "%" ; 
    
      return false; 
    
      } 
    
      } 
    
      document.onmouseup = function(){ 
    
      document.onmousemove = null; 
    
      } 
    
     </script> 
    
     </html>

 
    一开始在onmousemove这一块最后没有写return false;导致进度条拖拽出现bug，例如鼠标点击时无反应，松开点击再移动时进度条也会改变， 
   

 
    出现的原因是虽然再onmouseup中将onmousemove设置为空，但在onmousemove这个方法不知什么原因并没有结束，而且一个为空，一个不为空， 
   

 
    运行中也发生了冲突。return：false；则是结束onmousemove这个方法。这样再在onmouseup中设置onmousemove = null，就不会在发生冲突了。 
   

另外：retrun true； 返回正确的处理结果。
return false；返回错误的处理结果，终止处理。
return；把控制权返回给页面。

posted @ 2018-08-24 18:52 帅到无穷大阅读( ...) 评论( ...) 编辑收藏

孤独的小色狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度条与return false

进度条与return false 写进度条小案例：代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;进度条&lt;/title&gt; &lt;style&
复制链接

扫一扫