-2

我设计了一个滑块,例如带有 jquery 的播放器音量滑块。但问题仅在 FIREFOX 中,第一次当我拖动滑块时这是正常的,但第二次浏览器拖动该 div 就像拖动图像一样。除非第一次拖动后我点击一个空白区域并再次拖动滑块。这里有什么问题?对不起,我的英语不好。

编辑 :

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;
        }
    });

});
4

2 回答 2

2

您可以添加e.preventDefault();到您的mousedown以防止 Firefox 尝试使用的任何行为。

于 2013-01-06T21:42:53.780 回答
0

我将此代码添加到 css 中,它可以防止 div 被选中。这解决了问题。

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
于 2013-01-06T21:44:50.760 回答