Question

Firefox有这种烦人的行为，它让用户默认拖放任何图像元素。如何使用jQuery干净地禁用此默认行为？

Answer 1

以下内容将在Firefox 3及更高版本中执行：

$(document).on("dragstart", function() {
     return false;
});

如果您不想禁用所有拖动（例如，您可能仍希望允许用户将链接拖动到其链接工具栏），则可以确保仅阻止<img>元素拖动：

$(document).on("dragstart", function(e) {
     if (e.target.nodeName.toUpperCase() == "IMG") {
         return false;
     }
});

请记住，这将允许拖动链接中的图像。

Answer 2

它需要是jQuery吗？您只需要使用event.preventDefault()为相关图像上的mousedown事件定义回调函数。

因此，您的图片代码可能如下所示：

<img src="myimage.jpg" onmousedown="if (event.preventDefault) event.preventDefault()" />

需要额外的if，否则IE会抛出错误。如果您想为所有图像标记使用此标记，则只需使用jQuery迭代img标记并附加onmousedown事件处理程序。

在这个页面上有一个很好的解释（和示例）：“Disable image dragging in FireFox”和一个没有记录的版本在这里使用jQuery作为参考：“Disable Firefox Image Drag”

Answer 3

没有jQuery的解决方案：

document.addEventListener('dragstart', function (e) {
    e.preventDefault();
});

Answer 4

如果Javascript是可选要求，您可以尝试使用CSS

.wrapper img {
    pointer-events: none;
}

Answer 5

引用 Tim Down 的解决方案，您可以在使用jQuery时实现相当于仅禁用img拖动的第二个代码段：

$(document).on("dragstart", "img", function() {
     return false;
});

Answer 6

我不记得我的来源，但工作

  <script type="text/javascript">

  // register onLoad event with anonymous function
window.onload = function (e) {
    var evt = e || window.event,// define event (cross browser)
        imgs,                   // images collection
        i;                      // used in local loop
    // if preventDefault exists, then define onmousedown event handlers
    if (evt.preventDefault) {
        // collect all images on the page
        imgs = document.getElementsByTagName('img');
        // loop through fetched images
        for (i = 0; i < imgs.length; i++) {
            // and define onmousedown event handler
            imgs[i].onmousedown = disableDragging;
        }
    }
};

// disable image dragging
function disableDragging(e) {
    e.preventDefault();
}
</script>

如何使用jQuery禁用Firefox默认拖放所有图像行为？

6 个答案: