CSS /JS防止拖鬼图像?

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

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

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;
}

成一个

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

其他回答

试一试:

img {
  pointer-events: none;
}

尽量避免

* {
  pointer-events: none;
}

//禁用图像拖动

$(document).on("dragstart", function (e) {
  e.preventDefault();
});

这需要jQuery。这可以防止拖拽任何文本或img。将文档替换为您想要阻止拖动的任何元素。

你可以使用CSS属性禁用webkit浏览器中的图像。

img{-webkit-user-drag: none;}

<img src="myimage.jpg" ondragstart="return false;" />

我发现，对于IE，你必须添加draggable="false"属性的图像和锚，以防止拖动。CSS选项适用于所有其他浏览器。我用jQuery做了这个:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

推荐文章