禁用从HTML页面中拖动图像

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

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

当前回答

答案很简单:

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

2019-07-11 01:34:43

其他回答

CSS唯一的解决方案:使用指针事件:none

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

2013-01-21 05:11:23

你可以认为我的解决办法是最好的。大多数答案都不兼容旧的浏览器，如IE8，因为e.c preventdefault()不支持以及ondragstart事件。要做到跨浏览器兼容，你必须阻止鼠标移动事件为这张图片。请看下面的例子:

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

没有jQuery

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

甚至可以在IE8上测试和运行

2015-07-20 10:12:53

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

<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 draggable="false" src="images/testimg1.jpg" alt=""/>

2014-11-20 07:45:31

我做的css属性显示在这里以及监视器ondragstart与以下javascript:

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

2017-09-07 14:31:20

禁用从HTML页面中拖动图像

推荐文章

最新文章

标签