禁用从HTML页面中拖动图像

我需要在我的页面上放一张图片。我要禁用图像的拖拽。我尝试了很多方法，但都无济于事。有人能帮我一下吗?

我不想保留那个图像作为背景图像因为我在调整图像的大小。

当前回答

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

<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中工作吗

2017-04-11 12:08:33

其他回答

这段代码正是您想要的。它可以阻止图像拖动，同时允许依赖于该事件的任何其他操作。

$("img").mousedown(function(e){
    e.preventDefault()
});

2012-08-03 05:45:34

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

<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中工作吗

2017-04-11 12:08:33

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

工作在这个Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

2014-06-04 19:50:30

答案很简单:

<body oncontextmenu="return false"/> -禁用右键单击 <body ondragstart="return false"/> -禁用鼠标拖动 <body ondrop="return false"/> -禁用鼠标下落

2019-07-11 01:34:43

为此，您可以使用内联代码

第二个选择是使用外部或页面上的css

img { -moz-user-select:没有; -webkit-user-select:没有; -ms-user-select:没有; 用户选择:没有; -webkit-user-drag:没有; user-drag:没有; -webkit-touch-callout:没有; ｝ < img src = " http://www.ourkanpur.com/images/logo.png " >

两者都正常工作我在这个网站上使用外部css(点击这里)

2019-04-19 11:46:21

禁用从HTML页面中拖动图像

推荐文章

最新文章

标签