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

在Javascript中,FireFox不允许通过拖动来调整div的大小,javascript,firefox,resize,draggable,textselection,Javascript,Firefox,Resize,Draggable,Textselection,我有一个带边框的div,在它的右下角有一个用于调整大小的图像: 因此,当用户在图像上按鼠标时,他(或她)可以拖动鼠标并调整div的大小 这在除FireFox之外的所有浏览器中都能正常工作 在FireFox中发生了一些奇怪的事情:用户按下鼠标并开始拖动后,光标变为: 因此,当拖动鼠标时,光标将更改为该光标,并且不会出现鼠标移动事件 我想知道,是什么导致了这种行为。我想也许FireFox认为用户试图通过按住并拖动鼠标来选择文本。但我使用以下代码取消了文本选择: resizeImageImg.on

我有一个带边框的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仍然不允许调整大小并将光标更改为“不允许”


有人能帮忙吗?安迪,这是我想出的解决办法。我已经尽了很大的努力使它快速和易于使用

您可以在此处查看该文件:

它使用起来很简单。创建图像并指定宽度和高度。然后,加载页面后,调用函数imageResizer.init(imageObject),将图像对象作为参数发送。然后,它将使用拖动器设置图像


这在firefox、chrome和InternetExplorer8+中都可以使用。

谢谢大家,我找到了解决方案

我替换了:

resizeImageImg.ondragstar = "return false;"; 

它也开始在FireFox中工作

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

resizeImageImg.setAttribute ("draggable", false);
(至少在FireFox中是这样)因为Ragstart上的事件还在继续。我明白这一点,当我设置:

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

所以我意识到FireFox不反对setAttribute(“draggable”,false)——而其他浏览器反对。

谢谢,我检查了你的解决方案,很酷。我的一个与此类似(我无法提供指向它的链接,因为它是一个私人项目,您需要登录名/密码才能访问)。但由于某种原因,在我的解决方案中,一些浏览器不允许鼠标移动事件通过。我确实允许。所以我明白了,我的调整大小图像(红色对角条纹)应该设置属性ondragstart=function(){return false;};所以浏览器不会处理鼠标移动事件,而是让我的函数来处理它们。
resizeImageImg.ondragstart = function () { alert ("ondragstart"); return false; };