如何防止在 chrome 和 safari 中的“空”位置双击选择

Question

我的网页出现问题。当用户在任何地方（chrome / safari）双击空白区域时，它只需选择所有空白区域并突出显示。为了避免这种情况，我使用了这个 css 属性：

body {
  overflow: hidden;
  -moz-user-select     : none;
 -khtml-user-select   : none;
 -webkit-user-select  : none;
 -o-user-select       : none;
 user-select          : none;
}

现在我也无法选择“文本”。这真是太糟了。如何使可选择变得可选择并避免空白空间..？

有什么想法吗？

屏幕截图：

Live Demo

注意：点击表格列。你不能选择文本。

Answer 1

为了防止双击空白空间，您可以使用以下脚本和样式。

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

对于 Chrome 和 safari 浏览器，您可以使用以下样式。

 span.no_selection {    
   -webkit-user-select: none; /*(safari, chrome) webkit */
 }

我希望它能正常工作。

Answer 2

编辑：看，这就是我所说的实际操作。单击时，您可以很好地选择文本。但是，双击时，CSS 规则-webkit-user-select: none; 被激活，从而防止选择“空白空间”。再次单击事件时，此规则将被删除。 JSFiddle

-webkit-user-select: none; 将禁止所有尝试单击和选择网页上的内容。这是正常的行为。

双击不是常见的用户操作，因此不必担心。但是，如果您绝对必须尝试取消此操作，您可以为页面上的所有点击创建一个事件侦听器，将其时间戳记录为变量，将大约一秒的时间长度设置为变量，然后检查下一次单击以查看其时间戳是否恰好距上次记录的单击时间戳超过一秒。如果是，e.preventDefault 事件。如果没有，请允许。