如何删除图像上的选择

Question

我想删除页面上所有图像的选择突出显示。 我发现了一些有用的补充，例如：

CSS

img {
     -webkit-user-select:none;
     -khtml-user-select:none;
     -moz-user-select:none;
     -o-user-select:none;
      user-select:none;
      pointer-events:none
}

但是当我按下鼠标按钮并选择多个内容或按Ctrl+A 进行“全选”时，我的图像会以蓝色阴影突出显示。 我尝试通过以下方式更改它：

CSS

img::selection      {background:transparent;color:inherit;}
img::-moz-selection {background:transparent;color:inherit;}

但这没有任何作用。

有人有有用的解决方案还是还没有？

附： : 我不在乎选择我的图像 - 我只是想摆脱那个蓝色的形状。

Answer 1

这是我想出的一个古怪的解决方案......

1) 经过一些测试，我发现这只发生在 Mozilla 上。其他浏览器不显示代码时图像上的蓝色选择

img::selection {
    background: transparent;
}

已设置。

2) 即使是 Mozilla - 只有图像元素有问题。但是带有background-image 的其他元素遵循::selection 规则。

所以技术上我们可以解决这个问题，假设我们在我们设置为 display:none; 的每个 img 元素之后在我们的标记中添加一个空跨度；

然后我们可以添加一些仅在 firefox 中运行的 CSS，它将图像设置为 display:none 并在相邻的 span 上放置一个背景图像。

像这样：

FIDDLE

**

img::selection {
    background: transparent;
}
img + span {
    display: none;
}

@-moz-document url-prefix() {
    img {
        display: none;
    }
    
    img + span {
        background: url(http://placehold.it/200x200) no-repeat;
        width: 200px;
        height: 200px;
        display: block;
    }
}

<div>Hello there </div>

<img src="http://placehold.it/200x200" /><span></span>

<div>Hello there </div>

1: http://jsfiddle.net/GMuzV/30/

Answer 2

这禁用了 DOM 元素上的突出显示：

function disableSelection(target){
    if (typeof target.onselectstart!="undefined") // if IE
        target.onselectstart=function(){return false}
    else if (typeof target.style.MozUserSelect!="undefined") // if Firefox
        target.style.MozUserSelect="none";
    else // others
         target.onmousedown=function(){return false;}

    target.style.cursor = "default";
}

像这样使用它：

disableSelection(document.getElementById("my_image"));