在 div 内拖动 - Firefox 问题答案

【问题标题】：Dragging inside div - Firefox issue在 div 内拖动 - Firefox 问题
【发布时间】：2011-03-31 05:03:04
【问题描述】：

您好，

我在使用一个简单的 jQuery mousemove 函数时遇到了问题：

当我在一个 div 中单击并拖动时，有时浏览器会尝试“拖动”该 div，就像它是一个图像一样。这仅在 Firefox（测试版 4.0）中出现，并且正在对我的项目造成严重破坏。

我把它归结为这个测试用例：

<style type="text/css" media="screen">
.box { width: 100px; height: 100px; margin: 10px; }
.red {background-color: red; }
.yellow {background-color: yellow; }
.green {background-color: green; }
.hidden { display: none; }
</style>

<div class="box red"></div>
<div class="box yellow">Can't Drag Me</div>
<div class="box green"><div class="hidden">Can't Drag Me</div></div>

要重现：在 div 上单击一次以选择它，然后单击并拖动。

红框可拖动
不能拖动黄色框
绿色框可以拖动

所以问题似乎只在 div 为空或其内容被隐藏时才会出现。

谁能向我解释为什么会这样？防止这种“拖拉”行为的最佳方法是什么？现在我知道我可以向容器添加一个空 div，但我想知道是否有更优雅的方法。

谢谢

【问题讨论】：

标签： javascript jquery firefox html

【解决方案1】：

I wasn't able to reproduce the issue in Firefox 4，但如果它正在发生在你身上，这应该阻止它......

$('div').bind('dragstart', function(event) {
    event.preventDefault()
});

jsFiddle.

【讨论】：

谢谢 Alex，这确实有效，非常感谢。我还发现here 提出的解决方案也有效。好奇为什么我会看到这个问题（即使在 jsfiddle 示例中），但你没有。
@Moss 我不知道为什么，它发生过一次，但我无法再次重现它。顺便说一句，如果它解决了你的问题，请随时给我一个绿色的大勾号:)
我只是在等待计时器允许我！再次感谢。