不使用JS防止图像可拖动或可选择

Question

有没有办法在Firefox中使图像既不能被拖动又不能被选择，而不用JavaScript？这似乎很简单，但是问题在于：

1. 在Firefox中可以拖动和突出显示图像：

2. 所以我们添加了这个，但是图像仍然可以在拖动时被突出显示：

3. 所以我们添加了这个来解决突出显示的问题，但是让人感到违反直觉的是，图像又可以拖动了。很奇怪，我知道！使用FF 16.0.1

那么，有没有人知道为什么添加 -moz-user-select: none，会如何取代并禁用 draggable=false？当然，webkit像预期的一样工作。关于此事，网上没有任何信息......如果我们能一起澄清这个问题就太好了。

编辑：这是为了防止UI元素被意外拖动并提高可用性-而不是某种糟糕的复制保护方案的尝试。

- tmkly3

---

当然不是，抱歉我应该更具体一些，我试图防止我的一些UI元素被移动，因为在正确的上下文中它会影响可用性。 - tmkly3

如果您的背景元素靠近非常小的现代滚动条，并且每次测试滚动时未能准确命中滚动条，它们将被拖放到桌面上（或更糟糕地作为href代码行出现在浏览器窗口后面打开的某个文件中！），那么这将非常有用。 - Garavani

这是一个在 Firefox 中已知的问题，已经有很长一段时间了（https://bugzilla.mozilla.org/show_bug.cgi?id=1376369），正如事实所证明的那样（[重复？](https://bugzilla.mozilla.org/show_bug.cgi?id=1326143)）。 - Coderer

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

- Jeff Wooden

---

谢谢，我已经把它们放在了正确的位置，但问题看起来像是Firefox的一个bug。我想现在解决这个问题的唯一方法是通过Javascript。 - tmkly3

我发现我仍然可以在Firefox 47上拖动，但是将Masadow的 ondragstart="return false;" 属性添加到图像标签中可以解决这个问题。 - andrew pate

我仍然可以在Chrome中拖动。 - lonewarrior556

user-drag 只在 Safari 中生效。如果在图片标签中添加 draggable="false"，则可以阻止其可拖动。 - WrksOnMyMachine

当我设置 user-select: none 属性时，user-drag: none 属性不起作用……Chrome 80。 - Elijah Mock

Answer 2

您可以在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;
}

- Linh Dam

---

用这种方式做，使图像图标的行为更像是字形图标，所以我最喜欢这种方法。 - dansch

如果你使用这种方法，事件（如onclick）也将变得无法使用。请小心使用。 - Nicolas Bouvrette

这个回答在最新的软件版本中仍然有效，而被接受的答案却不是。这应该成为新的被接受的答案。@tmkly3 - progyammer

如果我们为图像设置了点击事件，那么这将会创建问题。它会阻止点击事件的触发。 - Pratap A.K

两个答案不一定比一个好，尤其是其中一个答案也是其他人的答案。 - Jovylle

Answer 3

我一直忘记分享我的解决方案，我找不到不使用 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' ); 
};

这比它本该的要复杂得多。

- tmkly3

---

$(el).on('dragstart', function (e) {e.preventDefault();}); - Pete B

为了与原帖中的代码相匹配，它也可以写成 <img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">。 - Masadow

Answer 4

根据情况，通常将图像设置为带有CSS的

的背景图像很有帮助。

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

然后在 CSS 中：

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

请参考此JSFiddle，其中包含一个按钮和一个不同的尺寸选项。

- Nick Merrill

Answer 5

你可能只需要求助于

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

- Thomas Bachem

---

这应该是被接受的答案，Firefox不支持用户拖动。谢谢！ - Merritt6616

对我来说，“pointer-events”也是解决方案，因为它可以跨浏览器使用（至少在2018年11月，“user-drag”在Firefox上没有效果）。 - David Dal Busco

请注意，将 pointer-events 设置为 none 也会关闭所有指针事件，例如 JavaScript 中的 onclick、onmouseenter 等。请参阅此答案：https://dev59.com/p2cs5IYBdhLWcg3wXi1D#27086394 - Samathingamajig

Answer 6

特别针对 Windows Edge 浏览器的通用解决方法（因为 -ms-user-select: none; CSS 规则不起作用）：

window.ondragstart = function() {return false}

注意: 当你仍需要点击事件（例如无法使用 pointer-events: none），但又不想显示拖曳图标时，这可以避免你必须在每个 img 标签上添加draggable="false"。

- Philip Murphy

---

这是我唯一有效的答案！不知道为什么它没有得到更高的投票。 - AldaronLau

Answer 7

这是一个四部分的解决方案，几乎适用于所有现代浏览器：

<img src="foobar.jpg" draggable="false" ondragstart="return false;">

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

如果您想允许选择/高亮文本，则可以删除底部四行CSS代码。

- Pikamander2

---

这个答案是几个其他答案的综合版本，所有这些答案都很有帮助，但还没有被合并成一个方便的单一答案。 - Pikamander2

目前在Firefox浏览器中无法工作，因为-moz-user-select: none会阻止draggable="false"的工作。请参见 https://bugzilla.mozilla.org/show_bug.cgi?id=1376369。 - Marcio Duarte

Answer 8

我创建了一个与图像大小相同并位于图像上方的

元素。这样，鼠标事件就不会传递到图像元素。"最初的回答"

- User

Answer 9

你可以将图片设置为背景图片。由于它位于一个

中，而且

是不可拖动的，所以图片也将是不可拖动的：

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

- joshua pogi 28

Answer 10

我在我的项目中找到了这个解决方法...

我创建了一个带有以下CSS代码的类：

.undraggable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

然后将此类用于您想要使其无法拖动或无法选择的任何图像。在容器中使用此类还可以使容器内的所有图像都无法拖动或无法选择。

让我知道这对你们来说效果如何...

- Galib Mahmud