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

Posted 2023-03-06

【中文标题】在 Javascript FireFox 中不允许通过拖动来调整 div 的大小

【英文标题】：In Javascript FireFox does not allow resizing div by dragging

【发布时间】：2012-02-23 03:12:22

【问题描述】：

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

有人可以帮忙吗？

【参考方案1】：

安迪，这是我想出的解决方案。我付出了巨大的努力使它变得快速和易于使用。

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

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

这适用于 firefox、chrome 和 internet explorer 8+。

【讨论】：

谢谢，我检查了你的解决方案，很酷。我的类似（我无法提供链接，因为它是一个私人项目，您需要登录名/密码才能访问）。但由于某种原因，在我的解决方案中，一些浏览器不允许鼠标移动事件通过。 IE 确实允许。所以我明白，我的 resize-image（红色斜条纹）应该设置属性 ondragstart = function () return false; ;所以浏览器不会处理鼠标移动事件，而是让我的函数来处理它们。

【参考方案2】：

谢谢大家，我找到了解决办法。

我换了：

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) - 而其他浏览器则这样做。