Firefox将div视为图像

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