禁用在整个项目 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;
}

我已经完成了禁用从 HTML 页面拖动图像，但没有找到我问题的答案。

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 合成事件的说明

从

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

因此，您需要添加到每个图像中。

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

Answer 2

对于特定图像，您可以执行以下操作，它将适用于所有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">