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

Tôi đã thực hiện điều khiển phân trang và tôi nhận thấy rằng trong khi nhấp vào các nút, rất dễ vô tình chọn các hình ảnh và văn bản riêng lẻ. 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à đánh dấu bằng chuột. (Hãy thử kéo chuột của bạn từ bên này sang bên kia của màn hình.)

Nếu bạn cố gắng đánh dấu văn bản / điều khiển trong lưới này, nó không thể được chọn. Điều đó được thực hiện như thế nào? Liên kết

kéo và chọn cả hai khởi tạo trên một sự kiện chuột xuống và cập nhật trong các lần 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 để theo dõi chuột, hãy hủy hiện tượng sôi nổi của sự kiện và ghi đè trả lại trình duyệt mặc định:

một cái gì đó như thế này trong khi bạn bắt đầu kéo mousown và di chuyển các bộ xử lý-

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;
}

Để kéo, bạn đang nắm bắt các sự kiện mousedownvà mousemove. (Và hy vọng touchstartvà touchmovecác sự kiện cũng vậy, hỗ trợ giao diện cảm ứng.)

Bạn sẽ cần gọi event.preventDefault()trong cả sự kiện downvà moveđể ngăn trình duyệ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;
});

Đây là một bài viết rất cũ. Nó có thể không trả lời chính xác tình huống đó, nhưng tôi sử dụng CSS cho giải pháp của mình:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Tôi muốn bình luận, nhưng tôi không có đủ danh tiếng. Sử dụng hàm được đề xuất từ ​​@kennebec đã giải quyết vấn đề 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 di chuyển chuột và di chuyển chuột của mình, ngay sau khi tôi có thể nhận ra tôi đã nhấp vào đúng phần tử. Nếu tôi gọi nó ngay trên đầu của hàm, tôi chỉ cần bỏ bất kỳ cú nhấp chuột nào vào tài liệu. Chức năng của tôi được đăng ký như một sự kiện trên document.body.

thử đi:

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

Điều này có thể đạt được bằng cách sử dụng CSS trong hầu hết các trình duyệt và phần unselectablemở rộng trong IE. Xem câu trả lời của tôi tại đây: Làm cách nào để tắt tính năng đánh dấu vùng chọn văn bản bằng CSS?

chỉ cần ngăn chặn nó bằng cách gọi hàm mờ () khi được chọn như sau:

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

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

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