파이어 폭스는 두 번째로 자체 div를 드래그합니다.

Question

jquery.but와 함께 플레이어 볼륨 슬라이더와 같은 슬라이더를 디자인했습니다. 문제는 FIREFOX에서만 처음입니다. 슬라이더를 드래그하면 정상이지만 두 번째 시간에는 브라우저가 드래그하는 것처럼 드래그합니다. 처음부터 드래그 한 후 빈 영역을 클릭하고 슬라이더를 다시 드래그하십시오. 여기에 문제가 있습니까? 나쁜 영어로 죄송합니다.

EDIT :

http://codepen.io/anon/pen/bjChB

HTML :

<div id="btn_container"> 

    <div id="button"></div> 

</div> 

CSS :

div#btn_container{ 
width:200px; 
height:60px; 
position:absolute; 
background:red; 
margin:auto; 
right:0;left:0;top:0;bottom:0; 
} 
div#button{ 
width:60px; 
height:60px; 
background:blue; 
position:absolute; 
left:0px;top:0px; 
} 

JQuery와 :

$(document).ready(function() { 
    var pressed = false; 
    var $this; 
    var x; 
    $("div#button").mousedown(function(e){ 
     pressed = true; 
     $this = $(this); 
     var offset = $this.offset(); 
     var inside = e.pageX - offset.left; 
     $(document).mousemove(function(e){ 
      if(pressed){ 
       var parentOffset = $this.parent().offset(); 
       x = e.pageX - parentOffset.left; 
       if(x <= $this.parent().width() - $this.width() + inside && x >= 0 + inside) 
        $this.css({"left":x - inside}); 
      } 
     }); 
    }); 
    $(document).mouseup(function(){ 
     if(pressed){ 
      if(x > $this.parent().width() - $this.width() - 30) 
       $this.animate({"left":$this.parent().width() - $this.width()} , 50); 

      pressed = false; 
     } 
    }); 

}); 

Answer 1

mousedown에 e.preventDefault();을 추가하면 파이어 폭스가 사용하려고하는 모든 행동을 막을 수 있습니다.

Answer 2

이 코드를 CSS에 추가 했으므로 div가 선택되지 않습니다.이 문제가 해결되었습니다.

-moz-user-select: none; 
-khtml-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none; 
user-select: none;