是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性,而是体验)。

我已经尝试了这个,它修复了文本和图像上的蓝色选择的问题,但不是幽灵图像:

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)!重要; }