是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性,而是体验)。
我已经尝试了这个,它修复了文本和图像上的蓝色选择的问题,但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性,而是体验)。
我已经尝试了这个,它修复了文本和图像上的蓝色选择的问题,但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
当前回答
<img src="myimage.jpg" ondragstart="return false;" />
其他回答
document.querySelectorAll("*").forEach((elem) => {
elem.setAttribute('draggable', false)
elem.addEventListener('dragstart', (event) => {
event.preventDefault()
})
})
这将禁用对所有元素的拖动。
对于Firefox,你需要深入一点:
var imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++) {
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
function disableDragging(e) {
e.preventDefault();
}
享受。
你可以使用CSS属性禁用webkit浏览器中的图像。
img{-webkit-user-drag: none;}
处理dragstart事件并返回false。
这个工作为我,我使用一些灯箱脚本
.nodragglement { 转换: 翻译(0px, 0px)!重要; }