防止图像被拖动或选择而不使用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按预期工作。 Interwebs上没有任何内容可以说明这一点......如果我们能够一起照亮这些内容，那将是非常棒的。
谢谢！！
编辑：这是关于防止UI元素被无意中拖动并提高可用性 - 而不是一些跛脚尝试复制保护方案:-)
将以下CSS属性设置为图像：
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
我一直忘记分享我的解决方案，我找不到使用JS的方法。 有些角落案例@Jeffery A Wooden的建议CSS不会涵盖。
这就是我应用于所有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;
}
编辑
这会阻止（点击）事件。 所以更好的解决方案是
<img draggable="false" (dragstart)="false;" class="unselectable">
.unselectable {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
上一篇: Preventing an image from being draggable or selectable without using JS