Firefox将div视为图像

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

 #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; }    $(document).ready(function() { $("#slider").mousedown(function() { $(document).mousemove(function(evnt) { $("#test").html("sliding"); }).mouseup(function() { $("#test").html("not sliding"); $(document).unbind("mousemove mouseup"); });}); });  
a
 
 
  

一切（令人惊讶的）在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

糟糕的错误，在搞乱之后，似乎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; } }); });