Question

我正在使用这个HTML，CSS和Javascript代码（如果你想测试它，可以在一个文档中）：

<style type="text/css">
#slider_container {
    width: 200px;
    height: 30px;
    background-color: red;
    display:block;
}

#slider {
    width: 20px;
    height: 30px;
    background-color: blue;
    display:block;
    position:absolute;
    left:0;
}
</style>
<script type="text/javascript" src="../../js/libs/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

   $("#slider").mousedown(function() {
       $(document).mousemove(function(evnt) {
       $("#test").html("sliding");
   }).mouseup(function() {
       $("#test").html("not sliding");
       $(document).unbind("mousemove mouseup");
   });});

});
</script>

<div id="test">a</div>
<div id="slider_container">
  <div id="slider"></div>
</div>

一切（令人惊讶的）在IE中运行良好，但是当使用这个javascript时，firefox似乎完全是clusterf * ck。第一个“幻灯片”没问题，你拖动，它说“滑动”，你下降，它说“没有滑动”。在第二个“幻灯片”（或mousedown，如果你愿意），firefox突然认为div是一个图像或链接，并想要拖动它。

拖动的屏幕截图：

显然，在红色div中半定位的蓝色div是被拖动的那个。当您截取屏幕截图时，Windows不捕获光标，但它是一个停止标志。

是否有某种方法可以阻止此默认行为？

Answer 1

您需要从事件处理程序返回false以防止默认操作（选择文本，拖动选择等）。根据Crispy发布的代码，这是我的解决方案：

$(function() {
    var sliderMouseDown = false;

    $("#slider").mousedown(function() {
        sliderMouseDown = true;
        return false;
    });
    $(document).mousemove(function(evnt) {
        if (sliderMouseDown) {
            $("#test").html("sliding");
            return false;
        }
    });
    $(document).mouseup(function() {
        if (sliderMouseDown){
            $("#test").html("not sliding");
            sliderMouseDown = false;
            return false;
        }
    });
});

Answer 2

整洁的bug，在弄乱它之后，似乎Firefox记得滑块上的mousedown事件，并将其视为用户已经开始选择一些文本（因此你看到的“停止标志”）。因此，Firefox会将下一个mousedown事件视为用户将文本拖离某处。可能有一个更合适的解决方案，但只需添加一个 $("#slider").focus() 从那时起，Firefox将“重置”光标，这样就不会认为用户正在拖动某些文本。

我还想评论你是否反复绑定和取消绑定事件（这似乎与ie7做多次拖拽并不相符）。我会建议类似下面的内容，它会对代表们进行一次约束。

$(function() {
    var sliderMouseDown = false;

    $("#slider").mousedown(function() {
        sliderMouseDown = true;
    });
    $(document).mousemove(function(evnt) {
        if (sliderMouseDown) {
            $("#test").html("sliding");
        }
    });
    $(document).mouseup(function() {
        if (sliderMouseDown)
        {
            $("#test").html("not sliding");
            $("#slider").focus(); //<-- fix the FF issue to reset cursor
            sliderMouseDown = false;
        }
    });

});

Firefox将div视为图像

2 个答案: