防止图像在不使用JS的情况下可拖动或可选择
防止图像在不使用JS的情况下可拖动或可选择
提问于 2012-10-16 10:40:20
有没有人知道一种方法，可以让图像在Firefox中不可拖动和不可选择，而不需要求助于Javascript？看似微不足道，但问题是：
可以在火狐中拖动和突出显示
- ：
- 所以我们添加了这个，但图像在拖动时仍然可以高亮显示：
所以我们添加了这个，来解决突出显示的问题，但是与直觉相反的是，图像又变得可拖动了。，我知道！使用FF 16.0.1
那么，有人知道为什么添加-moz-user-select: none会以某种方式胜过并禁用draggable=false吗？当然，webkit的工作方式与预期一致。互联网上没有任何关于this...It的东西，如果我们能一起照亮一些光芒，那就太好了。
编辑：这是为了防止UI元素被无意中拖动并提高可用性--而不是在版权保护方案上的一些蹩脚的尝试。
回答 9
Stack Overflow用户
回答已采纳
发布于 2012-10-16 10:46:54
为图像设置以下CSS属性：
.selector {
user-drag: none;
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}Stack Overflow用户
发布于 2012-11-16 07:12:34
我一直忘记分享我的解决方案，如果不使用JS，我找不到一种方法来做到这一点。有一些角落的案例，@Jeffery A木头的建议CSS不会覆盖。
这是我应用于所有UI容器的方法，不需要应用于每个元素，因为它在所有子元素上递归。
CSS：
.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;
}JS：
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' );
};这比它需要的要复杂得多。
Stack Overflow用户
发布于 2014-11-23 14:54:53
您可以在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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12906789
复制相关文章
相似问题