Làm cách nào để ngăn chặn lựa chọn văn bản/phần tử khi kéo con trỏ

Question

Tôi đã thực hiện điều khiển phân trang và nhận thấy rằng trong khi nhấp vào các nút, rất dễ dàng vô tình chọn từng hình ảnh và văn bản. Có thể ngăn chặn điều này không?

Để làm rõ việc chọn tôi có nghĩa là làm nổi bật bằng chuột. (Thử kéo chuột từ một phía của màn hình sang màn hình khác.)

Nếu bạn cố gắng làm nổi bật văn bản/điều khiển trong lưới này, bạn không thể chọn văn bản/điều khiển trong lưới này. Làm thế nào là thực hiện? Link

Answer 1

kéo và chọn cả khởi tạo trên sự kiện chuột xuống và cập nhật về di chuyển chuột tiếp theo. Khi bạn xử lý các sự kiện để bắt đầu kéo, hoặc đi theo con chuột, hủy bọt của sự kiện và ghi đè sự trở lại trình duyệt mặc định:

một cái gì đó như thế này trong của bạn bắt đầu kéo mousedown và di chuyển handlers-

e=e || window.event; 
pauseEvent(e); 

function pauseEvent(e){ 
    if(e.stopPropagation) e.stopPropagation(); 
    if(e.preventDefault) e.preventDefault(); 
    e.cancelBubble=true; 
    e.returnValue=false; 
    return false; 
} 

Answer 2

thử điều này:

document.onselectstart = function() 
{ 
    window.getSelection().removeAllRanges(); 
}; 

Answer 3

này có thể đạt được sử dụng CSS trong hầu hết các trình duyệt và các unselectable expando trong IE. Xem câu trả lời của tôi ở đây: How to disable text selection highlighting using CSS?

Answer 4

Tôi muốn nhận xét nhưng tôi không có đủ danh tiếng. Sử dụng chức năng được đề xuất từ ​​@kennebec giải quyết được sự cố của tôi trong thư viện kéo javascript của tôi. Nó hoạt động hoàn hảo.

function pauseEvent(e){ 
    if(e.stopPropagation) e.stopPropagation(); 
    if(e.preventDefault) e.preventDefault(); 
    e.cancelBubble=true; 
    e.returnValue=false; 
    return false; 
} 

tôi gọi nó trong chức năng tùy chỉnh chuột và chuột, ngay sau khi tôi có thể nhận ra tôi đã nhấp vào phần tử bên phải. Nếu tôi gọi nó chỉ là trên đầu trang của chức năng tôi chỉ cần giết bất kỳ nhấp chuột vào tài liệu. Chức năng của tôi được đăng ký dưới dạng sự kiện trên document.body.

Answer 5

Để kéo, bạn đang chụp các sự kiện mousedown và mousemove. (Và hy vọng touchstart và touchmove sự kiện là tốt, để hỗ trợ giao diện cảm ứng.)

Bạn sẽ cần phải gọi event.preventDefault() ở cả down và move sự kiện để giữ cho trình duyệt từ chọn văn bản.

Ví dụ (sử dụng jQuery):

var mouseDown = false; 
$(element).on('mousedown touchstart', function(event) { 
    event.preventDefault(); 
    mouseDown = true; 
}); 
$(element).on('mousemove touchmove', function(event) { 
    event.preventDefault(); 
    if(mouseDown) { 
    // Do something here. 
    } 
}); 
$(window.document).on('mouseup touchend', function(event) { 
    // Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element. 
    mouseDown = false; 
}); 

Answer 6

chỉ đơn giản là ngăn chặn nó bằng cách gọi blur() chức năng khi được chọn như sau:

<input Value="test" onSelect="blur();"> 

Answer 7

Nếu bạn cần phải chặn lựa chọn văn bản cho một thành phần nào đó sử dụng JavaScript, thì phương pháp đơn giản nhất đối với tôi là gán kiểu người dùng chọn như sau:

var myElement = document.createElement('div'); 
myElement.style.userSelect = 'none';