Ngăn chặn lựa chọn văn bản sau khi nhấp đúp

Tôi đang xử lý sự kiện dblclick trên một nhịp trong ứng dụng web của mình. Một tác dụng phụ là nhấp đúp chọn văn bản trên trang. Làm thế nào tôi có thể ngăn chặn lựa chọn này xảy ra?

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

Bạn cũng có thể áp dụng các kiểu này cho nhịp cho tất cả các trình duyệt không phải IE và IE10:

span.no_selection {
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

Trong javascript đơn giản:

element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);

Hoặc với jQuery:

jQuery(element).mousedown(function(e){ e.preventDefault(); });

Để ngăn chặn lựa chọn văn bản CHỈ sau khi nhấp đúp chuột:

Bạn có thể sử dụng MouseEvent#detailtài sản. Đối với các sự kiện mousedown hoặc mouseup, nó là 1 cộng với số lần nhấp hiện tại.

document.addEventListener('mousedown', function (event) {
  if (event.detail > 1) {
    event.preventDefault();
    // of course, you still do not know what you prevent here...
    // You could also check event.ctrlKey/event.shiftKey/event.altKey
    // to not prevent something useful.
  }
}, false);

Xem https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

FWIW, tôi đặt user-select: nonevào yếu tố phụ huynh của những phần tử con mà tôi không muốn bằng cách nào đó được lựa chọn khi tăng gấp đôi bất cứ nơi nào click vào yếu tố phụ huynh. Và nó hoạt động! Điều thú vị là contenteditable="true", lựa chọn văn bản và vv vẫn hoạt động trên các yếu tố con!

Vì vậy, như:

<div style="user-select: none">
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
</div>

Một hàm Javascript đơn giản làm cho nội dung bên trong phần tử trang không thể chọn:

function makeUnselectable(elem) {
  if (typeof(elem) == 'string')
    elem = document.getElementById(elem);
  if (elem) {
    elem.onselectstart = function() { return false; };
    elem.style.MozUserSelect = "none";
    elem.style.KhtmlUserSelect = "none";
    elem.unselectable = "on";
  }
}

Đối với những người tìm kiếm một giải pháp cho Angular 2+ .

Bạn có thể sử dụng mousedownđầu ra của ô bảng.

<td *ngFor="..."
    (mousedown)="onMouseDown($event)"
    (dblclick) ="onDblClick($event)">
  ...
</td>

Và ngăn chặn nếu detail > 1.

public onMouseDown(mouseEvent: MouseEvent) {
  // prevent text selection for dbl clicks.
  if (mouseEvent.detail > 1) mouseEvent.preventDefault();
}

public onDblClick(mouseEvent: MouseEvent) {
 // todo: do what you really want to do ...
}

Đầu dblclickra tiếp tục hoạt động như mong đợi.

hoặc, trên mozilla:

document.body.onselectstart = function() { return false; } // Or any html object

Trên IE,

document.body.onmousedown = function() { return false; } // valid for any html object as well

Chủ đề cũ, nhưng tôi đã đưa ra một giải pháp mà tôi tin là sạch hơn vì nó không vô hiệu hóa mọi ràng buộc ngay cả đối tượng và chỉ ngăn các lựa chọn văn bản ngẫu nhiên và không mong muốn trên trang. Nó là đơn giản, và làm việc tốt cho tôi. Đây là một ví dụ; Tôi muốn ngăn lựa chọn văn bản khi tôi nhấp nhiều lần vào đối tượng với lớp "mũi tên phải":

$(".arrow-right").hover(function(){$('body').css({userSelect: "none"});}, function(){$('body').css({userSelect: "auto"});});

HTH!

Nếu bạn đang cố gắng ngăn chặn hoàn toàn việc chọn văn bản bằng bất kỳ phương pháp nào cũng như chỉ với một lần nhấp đúp, bạn có thể sử dụng user-select: nonethuộc tính css. Tôi đã thử nghiệm trong Chrome 68, nhưng theo https://caniuse.com/#search=user-select nó sẽ hoạt động trong các trình duyệt người dùng thông thường hiện tại khác.

Về mặt hành vi, trong Chrome 68, nó được kế thừa bởi các phần tử con và không cho phép chọn văn bản chứa phần tử ngay cả khi văn bản bao quanh và bao gồm phần tử được chọn.

Để ngăn IE 8 CTRL và SHIFT bấm vào lựa chọn văn bản trên từng phần tử riêng lẻ

var obj = document.createElement("DIV");
obj.onselectstart = function(){
  return false;
}

Để ngăn chặn lựa chọn văn bản trên tài liệu

window.onload = function(){
  document.onselectstart = function(){
    return false;
  }
}

Tôi đã từng gặp vấn đề tương tự. Tôi đã giải quyết nó bằng cách chuyển sang <a>và thêm onclick="return false;"(để nhấp vào nó sẽ không thêm mục mới vào lịch sử trình duyệt).