禁止从 HTML 页面拖动图像

IT技术 javascript jquery html css image
2021-01-14 14:00:42

我需要在我的页面中放置一个图像。我想禁用该图像的拖动。我正在尝试很多事情，但没有帮助。有人可以帮我吗？

我不想将该图像保留为背景图像，因为我正在调整图像大小。

6个回答

你可以喜欢这个...

document.getElementById('my-image').ondragstart = function() { return false; };

看到它工作（或不工作，而不是）

看来您正在使用 jQuery。

$('img').on('dragstart', function(event) { event.preventDefault(); });
@AdamMerrifield 尝试$(document)而不是$(window)
2021-03-21 14:00:42
我刚刚发现你可以将 jQuery 简化为： $('img').on('dragstart', false);
2021-04-02 14:00:42
2021-04-02 14:00:42
@alex - ondragstart 是独立于浏览器的吗？
2021-04-04 14:00:42
@alex - 没有图像拖动的目的不是窃取图像。目的完全不同。我正在使该图像可排序和可放置。所以要花很长时间来解释。
2021-04-11 14:00:42

仅 CSS 解决方案：使用 pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

当图像作为链接时不使用它。
2021-03-18 14:00:42
另外一个CSS唯一的解决方案：将一个元素上的img。
2021-03-22 14:00:42
-1！这应该用于防止所有的 ponter 事件（包括拖动，比如当你想上传图像时）。使用 javascript 解决方案不是！
2021-03-23 14:00:42
看起来这在 IE（任何版本）中不起作用，请参阅：caniuse.com/pointer-events
2021-04-10 14:00:42
但这至少会导致 FF 中出现奇怪的选择效果。最好还是返回 false；
2021-04-14 14:00:42

只需将 draggable="false" 添加到您的图像标签：

<img draggable="false" src="image.png">

IE8 及以下不支持。

我正在使用 Magento，所以我的 div 像： <div class="product-img-box"> <?php echo $this->getChildHtml('media') ?> </div> 我如何限制右键单击并且不能拖动我的图像div。@dmo
2021-04-04 14:00:42 
window.ondragstart = function() { return false; }
展示如何做到这一点，当然，但它可以防止拖动所有东西，嗯..无论如何都要投票，以展示如何做到这一点。
2021-03-19 14:00:42
+1 不明白否决票。这不是最终的解决方案，但它可以防止拖动所有图像，而不仅仅是特殊图像。但它显示了正确的方向（我认为这是第一个这样做的答案）
2021-03-28 14:00:42
@DrMolle 这可能是为了回应史蒂夫对我的回答留下的（自删除后）评论。
2021-04-06 14:00:42
请记住，有时人们会将链接拖到他们的书签栏中——此解决方案将删除此功能。
2021-04-14 14:00:42

最简单的跨浏览器解决方案是 

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

有问题

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

是它在 Firefox 中不起作用

其它你可能感兴趣的问题
上一篇JavaScript 如何判断一个对象是否具有给定的属性 下一篇使用 Object.create(null) 创建 JS 对象是否与 {} 相同？