防止图像被拖动或select，而不使用JS
有没有人知道的方式来使图像不可拖动，而不是可选 – 在Firefox中，而不诉诸于JavaScript？ 似乎微不足道，但这是问题：
1）可以在Firefox中拖动和突出显示：
<img src="..."> 2）所以我们添加这个，但拖动时图像仍然可以突出显示：
<img src="..." draggable="false">
3）所以我们添加这个，以解决突出的问题，但是直觉上违反了， 图像再次拖动。 奇怪，我知道！ 使用FF 16.0.1
<img src="..." draggable="false" style="-moz-user-select: none;">
那么，有没有人知道为什么添加“-moz-user-select：none”，会以某种方式王牌和禁用“draggable = false”？ 当然，webkit按预期工作。 互联网上没有关于这个的东西……如果我们能够一起照亮这些东西，那将是非常棒的。
谢谢！！
编辑： 这是关于保持UI元素被无意中拖动和提高可用性 – 不是一些跛脚的尝试在复制保护scheme:-)
将以下CSS属性设置为图像：
user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none;
我一直忘记分享我的解决scheme，我找不到使用JS的方法。 @Jeffery A Woodenbuild议的CSS只是不会覆盖一些angular落案例。
这是我适用于所有的我的UI容器，不需要应用到每个元素，因为它回避所有的子元素。
.unselectable { /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */ /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */ -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */ -webkit-user-select: none; -ms-user-select: none; /* From IE10 only */ user-select: none; /* Not valid CSS yet, as of July 2012 */ -webkit-user-drag: none; /* Prevents dragging of images/divs etc */ user-drag: none; } var makeUnselectable = function( $target ) { $target .addClass( 'unselectable' ) // All these attributes are inheritable .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug. .on( 'dragstart', function() { return false; } ); // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS $target // Apply non-inheritable properties to the child elements .find( '*' ) .attr( 'draggable', 'false' ) .attr( 'unselectable', 'on' ); };
这比想要的复杂得多。
你可以在你的CSS中使用pointer-events属性，并将其设置为'none'
img { pointer-events: none; }
根据情况，通过CSS将图像制作为div的背景图像通常是有帮助的。
<div id='my-image'></div>
然后在CSS中：
#my-image { background-image: url('/img/foo.png'); width: ???px; height: ???px; }
看到这个JSFiddle的一个实例，一个button和一个不同的大小选项。
你可能只是诉诸于
<img src="..." style="pointer-events: none;">
您可以将图像设置为背景图像。 由于它驻留在一个div ，而div是不可压缩的，因此图像将不可复制：
<div style="background-image: url("image.jpg");"> </div>
特别针对Windows Edge浏览器的通用解决scheme（如-ms-user-select：none; CSS规则不起作用）：
window.ondragstart = function（）{return false}
注意：当您仍然需要点击事件（即不能使用pointer-events = none）时，这可以节省您不必为每个img标记添加draggable = false，但不希望拖动图标图像出现。
