在Javascript中，FireFox不允许通过拖动来调整div的大小

Question

我有一个带边框的div，在右下角我有调整大小的图像：

因此，当用户在图像上按下鼠标时，他（或她）可以拖动鼠标并调整div的大小。

这适用于所有浏览器，但FireFox。

在FireFox中发生了一些奇怪的事情：用户按下鼠标并开始拖动后，光标变为：

因此，当拖动鼠标时，光标会变为此光标并且鼠标移动事件不会到来。

我想知道是什么导致了这种行为。我想也许FireFox认为用户正试图通过按下并拖动鼠标来选择文本。但我使用此代码取消了文本选择：

resizeImageImg.onselectstart          = "return false;";
resizeImageImg.ondragstart            = "return false;";

resizeImageImg.style.WebkitUserSelect = 'none';
resizeImageImg.style.KhtmlUserSelect  = 'none';
resizeImageImg.style.MozUserSelect    = 'none';
resizeImageImg.style.MsUserSelect     = 'none';
resizeImageImg.style.OUserSelect      = 'none';
resizeImageImg.style.UserSelect       = 'none';

resizeImageImg.setAttribute ("unselectable", "on");
resizeImageImg.setAttribute ("draggable",    "false");

（对于两者：div和调整大小图像）

但这并没有解决问题。 FireFox仍然不允许调整大小并将光标更改为“不允许”。

有人可以帮忙吗？

Answer 1

谢谢大家，我找到了解决方案。

我换了：

resizeImageImg.ondragstar = "return false;"; 

通过

resizeImageImg.ondragstart = function () { return false; };

它也开始在FireFox中工作。

这里发生的是，如果您想在鼠标按下事件来自图像时处理鼠标移动事件，那么您必须使图像不可拖动。但这还不足以使用

resizeImageImg.setAttribute ("draggable", false);

（至少在FireFox中）因为ondragstart的事件仍然存在。我在设置时理解这一点：

resizeImageImg.ondragstart = function () { alert ("ondragstart"); return false; };

所以我意识到FireFox不会考虑setAttribute（“draggable”，false） - 而其他浏览器则这样做。

Answer 2

安迪，这是我提出的解决方案。我已经付出了巨大的努力使其快速和易于使用。

您可以在此处查看该文件： http://files.social-library.org/stackoverflow/imageResizer.html

使用简单。创建图像并指定宽度和高度。然后，一旦页面加载调用函数imageResizer.init（imageObject）发送图像对象作为参数。然后它将使用拖动器设置图像。

这适用于firefox，chrome和Internet Explorer 8 +。