javascript - 禁止在整个元素 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

您可以添加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()} />