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

Posted 2023-03-05

【中文标题】禁止在整个项目 HTML 页面中拖动图像

【英文标题】：Disable dragging of image in entire project HTML pages

【发布时间】：2020-09-17 16:56:15

【问题描述】：

我想禁止拖动我的项目中的所有图像，它有大量图像。我在网上找到的结果是禁用特定图像。将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，但没有找到我的问题的答案。

【参考方案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">

【参考方案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() />

【讨论】：

这个答案比其他答案更有效率。它帮助我解决了这个问题。我希望这个问题对你来说不是很愚蠢。

如何在 REACT 中实现这个？

@Kundan 你删除了接受答案的标签来询问如何在 React 中做到这一点？这不公平，你的问题中甚至没有提到 React 词：D

但如果你认为我删除它是因为我要求它进行 REACT，那么我将它放回去。我希望你喜欢我的问题。如果是，请投赞成票。