171

有谁知道在 Firefox 中不使用 Javascript 来同时使图像不可拖动且不可选择的方法？看似微不足道，但问题是：

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

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

  3. 所以我们添加了这个，以解决突出显示的问题，但与直觉相反，图像再次变得可拖动。奇怪，我知道！使用 FF 16.0.1

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

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

4

9 回答 9

264

为图像设置以下 CSS 属性：

.selector {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
于 2012-10-16T02:46:54.457 回答
58

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

这比它需要的复杂得多。

于 2012-11-15T23:12:34.397 回答
56

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

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;
}
于 2014-11-23T06:54:52.883 回答
13

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

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

然后在 CSS 中：

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

有关带有按钮和不同大小选项的实时示例，请参阅此JSFiddle。

于 2013-06-20T16:45:56.477 回答
12

你可能只是诉诸

<img src="..." style="pointer-events: none;">
于 2014-11-07T00:46:53.810 回答
8

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

window.ondragstart = function() {return false}

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

于 2017-09-14T10:18:45.633 回答
2

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

于 2019-04-17T12:11:49.157 回答
1

您可以将图像设置为背景图像。由于它位于 a 中div，并且div是不可拖动的，因此图像将是不可拖动的：

<div style="background-image: url("image.jpg");">
</div>
于 2014-12-22T05:28:00.473 回答
1

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

<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 的底部四行。

于 2022-02-16T18:30:50.307 回答