如何防止在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

要防止双击空白区域，您可以使用以下脚本和syles。

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该事件。如果没有，请允许它。