JavaScript: Tắt chọn văn bản qua doubleclick

Question

Khi nhấp đúp vào trang html, hầu hết các trình duyệt chọn từ bạn nhấp đúp vào (hoặc đoạn bạn nhấn ba lần). Có cách nào để loại bỏ hành vi này không?

Lưu ý rằng tôi không muốn vô hiệu lựa chọn thông thường thông qua nhấp chuột một lần + kéo; tức là $('body').disableSelection() của jQuery UI và sự kiện DOM document.onselectstart không phải là điều tôi muốn.

Answer 1

Tôi sợ bạn không thể ngăn chặn sự lựa chọn riêng của mình là "hành vi tự nhiên" của trình duyệt, nhưng bạn có thể xóa các lựa chọn ngay sau khi nó được thực hiện:

<script type="text/javascript"> 
document.ondblclick = function(evt) { 
    if (window.getSelection) 
     window.getSelection().removeAllRanges(); 
    else if (document.selection) 
     document.selection.empty(); 
} 
</script> 

Sửa: cũng để ngăn chặn việc lựa chọn toàn bộ theo "ba lần nhấp", đây là mã được yêu cầu:

var _tripleClickTimer = 0; 
var _mouseDown = false; 

document.onmousedown = function() { 
    _mouseDown = true; 
}; 

document.onmouseup = function() { 
    _mouseDown = false; 
}; 

document.ondblclick = function DoubleClick(evt) { 
    ClearSelection(); 
    window.clearTimeout(_tripleClickTimer); 

    //handle triple click selecting whole paragraph 
    document.onclick = function() { 
     ClearSelection(); 
    }; 

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000); 
}; 

function RemoveDocumentClick() { 
    if (!_mouseDown) { 
     document.onclick = null; 
     return true; 
    } 

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000); 
    return false; 
} 

function ClearSelection() { 
    if (window.getSelection) 
     window.getSelection().removeAllRanges(); 
    else if (document.selection) 
     document.selection.empty(); 
}​ 

Live test case.

Phải là trình duyệt chéo, vui lòng báo cáo mọi trình duyệt khi trình duyệt không hoạt động.

Answer 2

Chỉ cần ném điều này ra khỏi đó, nhưng đây là mã tôi tát vào các trang của tôi nơi tôi mong đợi người dùng nhấp nhanh chóng. Tuy nhiên, điều này cũng sẽ vô hiệu hóa lựa chọn văn bản bấm-n-kéo tiêu chuẩn.

document.body.onselectstart = function() { 
    return false; 
} 
document.body.style.MozUserSelect = "none"; 
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) { 
    document.body.onmousedown = function() { 
     return false; 
    } 
} 

Dường như hoạt động tốt cho tôi.

Answer 3

Chỉ cần đặt này trên css phần quan tâm

-moz-user-select  : none; 
-khtml-user-select : none; 
-webkit-user-select : none; 
-o-user-select  : none; 
user-select   : none; 

Answer 4

Nếu bạn thực sự muốn disable lựa chọn về kích đúp vào và không chỉ loại bỏ các lựa chọn sau đó (trông xấu xí với tôi), bạn cần phải return false trong sự kiện mousedown thứ hai (ondblclick sẽ không hoạt động vì lựa chọn được thực hiện onmousedown).

** Nếu ai đó không muốn lựa chọn nào cả, giải pháp tốt nhất là sử dụng CSS user-select : none; như Maurizio Battaghini đã đề xuất.

// set to true if you want to disable also the triple click event 
// works in Chrome, always disabled in IE11 
var disable_triple_click = true; 

// set a global var to save the timestamp of the last mousedown 
var down = new Date().getTime(); 
var old_down = down; 

jQuery(document).ready(function($) 
{ 
    $('#demo').on('mousedown', function(e) 
    { 
     var time = new Date().getTime(); 

     if((time - down) < 500 && 
     (disable_triple_click || (down - old_down) > 500)) 
     { 
      old_down = down; 
      down = time; 

      e.preventDefault(); // just in case 
      return false; // mandatory 
     } 

     old_down = down; 
     down = time; 
    }); 
}); 

Live demo here

Lưu ý quan trọng: tôi đặt sự nhạy cảm để 500ms nhưng Double-click nhạy cảm (thời gian tối đa giữa các nhấp chuột được phát hiện như là một nhấp chuột kép) có thể thay đổi tùy theo hệ điều hành và trình duyệt và thường có thể định cấu hình người dùng. - api.jquery.com

Đã thử nghiệm trong Chrome và IE11.

Answer 5

Tác vụ sau đây dành cho tôi trong các trình duyệt Chrome (v56), Firefox (v51) và MS Edge (v38) hiện tại.

var test = document.getElementById('test'); 
 
test.addEventListener('mousedown', function(e){ 
 
    if (e.detail > 1){ 
 
     e.preventDefault(); 
 
    } 
 
});

<p id="test">This is a test area</p>

Thuộc tính MouseEvent.detail theo dõi những current click count mà có thể được sử dụng để xác định xem sự kiện này là một đôi, Tripple, hoặc nhấp chuột hơn.

Rất tiếc, trình duyệt Internet không đặt lại bộ đếm sau một khoảng thời gian chờ vì vậy thay vì đếm số lần nhấp, bạn sẽ nhận được số lần người dùng đã nhấp từ khi trang được tải.