双击时如何停止突出显示div元素答案

【问题标题】：How to stop highlighting of a div element when double-clicking双击时如何停止突出显示div元素
【发布时间】：2011-10-24 12:04:20
【问题描述】：

我有一个带有背景图像的 div 元素，我想在双击它时停止突出显示 div 元素。这个有 CSS 属性吗？

【问题讨论】：

你用的是什么浏览器？在我的测试中，我无法在 Firefox 5、Chrome 12 或 IE9 中突出显示整个 div。

标签： css xhtml tags highlighting double-click

【解决方案1】：

下面的 CSS 阻止用户选择文本。实例：http://jsfiddle.net/hGTwu/20/

/* If you want to implement it in very old browser-versions */
-webkit-user-select: none; /* Chrome/Safari */ 
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* The rule below is not implemented in browsers yet */
-o-user-select: none;

/* The rule below is implemented in most browsers by now */
user-select: none;

要向下定位 IE9 和 Opera，必须使用 HTML 属性 unselectable：

<div unselectable="on">Test Text</div>

【讨论】：

这并没有阻止整个 div 被突出显示。我注意到它仅用于文本。我想防止在双击它时突出显示整个 div。
@dave：我假设因为双击导致突出显示的唯一时间是当其中有文本时，这就是你的意思。无需投票。
在 IE 或 Opera 中不起作用。您需要 unselectable 属性。顺便说一句，没有-o-user-select。
SASS/SCSS 用户注意事项：您可以@include user-select(none); 代替使用原始 CSS
快十年过去了，是时候更新一下了：user-select: none 应该是 pretty well supported by now。

【解决方案2】：

如果一个元素是可点击的，你可能想把它变成一个按钮元素。

【讨论】：

【解决方案3】：

我试图找到一种解决方案来停止在 Chrome 中突出显示 div，并转向这篇文章。但是，不幸的是，没有一个答案能解决我的问题。

经过大量的在线研究，我发现修复非常简单。不需要任何复杂的 CSS。只需将以下 CSS 添加到您的网页即可。这适用于笔记本电脑和移动屏幕。

div { outline-style:none;}

注意：这适用于 Chrome 版本 44.0.2403.155 m。此外，今天所有主要浏览器都支持它，如以下网址所述：https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

【讨论】：

【解决方案4】：

定位所有 div 元素：

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

定位所有元素：

::-moz-selection { background:transparent; }
::selection { background:transparent; }

【讨论】：

【解决方案5】：

我不是 CSS 专家，但我认为你可以使用 tw16 的答案，只要你扩大受影响的元素数量。例如，这可以防止在我的页面上突出显示任何地方，而不会影响任何其他类型的交互：

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

第一行由 Paul Irish 提供（来自 http://adamschwartz.co/magic-of-css/chapters/1-the-box/）。

【讨论】：

当你在 iOS 13 上有 PWA 时，永远不要使用这个 CSS，这会完全阻塞键盘。

【解决方案6】：

这对我有用

html
{
  -webkit-tap-highlight-color:transparent;
}

【讨论】：

这应该是最好的答案了。
这仅适用于 Chrome 和 Safari 等 webkit 浏览器，可能不适用于任何版本的 IE 或 Firefox。

【解决方案7】：

禁用用户选择：

div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

为所选元素设置背景透明：

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。