禁止在整个项目 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的注释

从 v0.14 开始，从事件处理程序返回 false 将不再停止事件传播。相反，应酌情手动触发 e.stopPropagation() 或 e.preventDefault()。

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

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