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

現在我也無法選擇“文本”。 這真是太糟了。 如何使可選擇成為可選擇和空白空間避免..？

任何想法？

屏幕截圖：

現場演示

注意：單擊表列。 你不能選擇文字。

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該事件。 如果沒有，請允許它。