Question

在IE浏览器中，例如，当您按下图像上的左键并按住它时尝试移动鼠标时，会发生拖动操作;我怎么能阻止这个默认动作，这样就不会发生任何事情。我正在构建一个图像裁剪器，所以你应该理解为什么我需要它。在jQuery之类的帮助下，我对知道如何这样做并不感兴趣。当我学习JavaScript时，我更喜欢用普通的JS编写代码。如果这样的事情有任何不同，对我来说学习如何跨浏览器非常重要。

Answer 1

就像八月一样，但是简单的JS：

var imgs = document.getElementById("my_container")
                   .getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onmousedown = function () {
        return false;
    };
}

如果你想做'新风格'，谷歌为'addEventListener（）'（所有浏览器，但......）和'attachEvent（）'（... IE）方法。

Answer 2

这是jQuery中的一个：

$("#my_container img").mousedown(function () {
  return false;
});

http://www.google.com/search?q=cross+browser+event+hooking可能会告诉您有关跨浏览器事件挂钩的所有信息。我不知道如何在没有框架的情况下挂钩事件，因为这是一个边缘情况恕我直言。在The Real World（tm）中，您将始终使用框架。

这里的核心是你必须阻止mousedown事件的运行。这将使拖放变得不可能，如果您在文本上挂钩事件，您将无法选择该文本，等等。

Answer 3

如果您正在构建图像裁剪器，那么您将在图像上放置某种叠加层，可能是相对或绝对定位的div，在用户单击时，您将在其中“绘制”矩形，和拖拉。这将使用户无法拖动图像本身，因此无需修复。

即使您不使用叠加层，您仍然会挂钩mousedown事件 - 据我所知，没有其他方法可以实现JS裁剪器。挂钩该事件本身就足以阻止浏览器启动拖放操作。

Answer 4

我正在使用类似于以下内容的代码来阻止拖动，这样做的好处是可以针对实际的拖拽相关事件而非通用mousedown（可能会产生副作用）。适用于Opera以外的所有主流浏览器。

function cancellingEventHandler(evt) {
    evt = evt || window.event;
    if (evt.preventDefault) {
        evt.preventDefault();
    } else if (typeof evt.returnValue !== "undefined") {
        evt.returnValue = false;
    }
    return false;
}

function disableDragging(node) {
    node.ondragstart = cancellingEventHandler;
    node.ondraggesture = cancellingEventHandler;
}

disableDragging( document.getElementById("anImage") );

JS：如何防止浏览器中图像的默认操作？

4 个答案: