在不使用 JS 的情况下防止图像可拖动或可选择答案

【问题标题】：Preventing an image from being draggable or selectable without using JS在不使用 JS 的情况下防止图像可拖动或可选择
【发布时间】：2012-10-06 02:03:52
【问题描述】：

有没有人知道在 Firefox 中不借助 Javascript 使图像不可拖动和不可选择的方法？看似微不足道，但问题出在：

在 Firefox 中可以拖动和高亮显示：
所以我们添加了这个，但是拖动时图像仍然可以突出显示：
所以我们添加了这个，以解决突出显示问题，但随后违反直觉，图像再次变得可拖动。很奇怪，我知道！使用 FF 16.0.1

那么，有谁知道为什么添加-moz-user-select: none，会以某种方式胜过并禁用draggable=false？当然，webkit 按预期工作。互联网上没有关于此的任何内容...如果我们能共同阐明这一点，那就太好了。

编辑： 这是为了防止 UI 元素被无意中拖拽并提高可用性——而不是对复制保护方案的一些蹩脚尝试。

【问题讨论】：

@JimGarrison 当然不是，对不起，我应该更具体一些，我试图让我的一些 UI 元素不被移动，在正确的上下文中它会损害可用性。
非常有用，如果您有将在桌面上拖动的背景元素（或者更糟糕的是，href 代码行到浏览器窗口后面在后台打开的某个文件中，同时处理它！）当它们接近时非常小的现代滚动条，并且每次测试滚动时您都不会准确地点击滚动条。
这是 Firefox 中 a really long time 的一个已知问题，事实证明 (duplicate?)

标签： css html firefox draggable

【解决方案1】：

为图像设置以下 CSS 属性：

.selector {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

【讨论】：

谢谢，我也有这些，但问题开始看起来像 Firefox 中的错误。我想目前解决这个问题的唯一方法是通过 Javascript。
我发现我仍然可以在 Firefox 47 上拖动，但添加了 Masadow 的 ondragstart="return false;"图像标签的属性修复了它。
我仍然可以在 chrome 中拖动
user-drag 仅适用于 Safari。如果将draggable="false" 添加到图像标签中，它将停止可拖动。
当我设置user-select: none user-drag: none 属性不起作用... Chrome 80

【解决方案2】：

我一直忘记分享我的解决方案，我找不到不使用 JS 的方法。在某些极端情况下，@Jeffery A Wooden 建议的 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' ); 
};

这比它需要的复杂得多。

【讨论】：

$(el).on('dragstart', function (e) {e.preventDefault();});
也可以写成<img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">来匹配OP的代码。

【解决方案3】：

您可以在 CSS 中使用 pointer-events 属性，并将其设置为“无”

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;
}

【讨论】：

这样做会使图像图标的行为更像一个字形图标，所以我最喜欢这种方法。
这也会使 (onclick) 之类的事件无法使用。使用这种方法时要小心。
这个答案仍然有效，而接受的答案不在最新的软件版本上。这应该是新接受的答案。 @tmkly3
如果我们有图像的点击事件，这将产生问题。它会阻止点击事件

【解决方案4】：

根据具体情况，使用 CSS 将图像设置为 div 的背景图像通常会有所帮助。

<div id='my-image'></div>

然后在 CSS 中：

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

请参阅此JSFiddle，了解带有按钮和不同尺寸选项的实时示例。

【讨论】：

【解决方案5】：

你可能只是诉诸

<img src="..." style="pointer-events: none;">

【讨论】：

这应该是公认的答案，Firefox 不支持用户拖动。谢谢你！
对我来说，“指针事件”也是解决方案，因为它可以跨浏览器工作（“用户拖动”对 Firefox 没有影响，至少在 11.2018 中）
请注意，将 pointer-events 设置为 none 也会关闭所有指针事件，例如 JavaScript 的 onclick、onmouseenter 等。看到这个答案：stackoverflow.com/a/27086394/12101554

【解决方案6】：

特别适用于 Windows Edge 浏览器的通用解决方案（如 -ms-user-select: none; CSS 规则不起作用）：

window.ondragstart = function() {return false}

注意：当你仍然需要点击事件（即你不能使用pointer-events: none）时，这可以让你不必将draggable="false"添加到每个img标签，但不希望拖动图标图像出现。

【讨论】：

唯一真正适合我的答案！不知道为什么它的票数不高。

【解决方案7】：

我创建了一个 div 元素，它与图像大小相同，并且位于图像顶部。然后，鼠标事件不会转到图像元素。

【讨论】：

【解决方案8】：

您可以将图像设置为背景图像。由于它驻留在div 中，而div 是不可拖动的，因此图像将是不可拖动的：

<div style="background-image: url("image.jpg");">
</div>

【讨论】：