在整个项目 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">

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

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

Answer 2

您可以将 ondragstart 属性添加到单个图像 & return false。

如果你想处理多张图片

const imgs = document.getElementsByTagName('img');
for(let i = 0; i < imgs.length; i++ ) {
    imgs[i].setAttribute("ondragstart", "return false")
}

来自 React 的注释 Synthetic events

As of v0.14, returning false from an event handler will no longer stop event propagation. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate.

所以你需要添加到每个图像。

<img src={source} onDragStart={e => e.preventDefault()} />

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

Disable dragging of image in entire project HTML pages

html

javascript

css

styling