在整个项目HTML页面中禁用图像拖动

Question

我想禁用具有大量图像的我项目中的所有图像的拖动。我在网上发现的结果是禁用了特定图像。将draggable="false"放入每个图像标签会花费很多时间。因此，我想要一个解决方案来一起禁用它们。

我成功禁用了此代码的拖动，但是在Firefox中仍然可以拖动。

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

我已经通过Disable dragging an image from an HTML page，但没有找到我的问题的答案。

Answer 1

对于特定的图像，您可以执行类似的操作，它将在所有browsers上正常工作

<!-- right image (dragging disabled) -->
<img src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png" onmousedown="if (event.preventDefault) event.preventDefault()">

如果您希望所有图像在包括firefox在内的所有浏览器中均不可拖动，那么只有几行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();
}

<img src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png">