Cegah pemilihan teks setelah klik dua kali

Saya menangani acara dblclick pada rentang waktu di aplikasi web saya. Efek sampingnya adalah klik dua kali memilih teks pada halaman. Bagaimana saya bisa mencegah pemilihan ini terjadi?

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

Anda juga dapat menerapkan gaya ini ke rentang untuk semua browser non-IE dan 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+ */
}

Dalam javascript biasa:

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

Atau dengan jQuery:

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

Untuk mencegah pemilihan teks HANYA setelah klik dua kali:

Anda bisa menggunakan MouseEvent#detailproperti. Untuk acara mousedown atau mouseup, ini adalah 1 ditambah jumlah klik saat ini.

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

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

FWIW, saya setel user-select: noneke elemen induk dari elemen anak-anak yang saya tidak ingin entah bagaimana dipilih ketika mengklik dua kali di mana saja pada elemen induk. Dan itu berhasil! Yang keren adalah contenteditable="true", pemilihan teks dan lain-lain masih bekerja pada elemen anak!

Jadi seperti:

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

Fungsi Javascript sederhana yang membuat konten di dalam elemen-halaman tidak dapat dipilih:

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

Bagi mereka yang mencari solusi untuk Angular 2+ .

Anda bisa menggunakan mousedownoutput dari sel tabel.

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

Dan mencegah jika 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 ...
}

The dblclickoutput terus bekerja seperti yang diharapkan.

atau, di mozilla:

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

Di IE,

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

Utas lama, tetapi saya menemukan solusi yang saya yakini lebih bersih karena tidak menonaktifkan setiap genap yang terikat pada objek, dan hanya mencegah pemilihan teks acak dan tidak diinginkan pada halaman. Sangat mudah, dan bekerja dengan baik untuk saya. Berikut ini sebuah contoh; Saya ingin mencegah pemilihan teks ketika saya mengklik beberapa kali pada objek dengan kelas "panah-kanan":

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

HTH!

Jika Anda mencoba untuk sepenuhnya mencegah pemilihan teks dengan metode apa pun serta hanya dengan klik ganda, Anda dapat menggunakan user-select: noneatribut css. Saya telah menguji di Chrome 68, tetapi menurut https://caniuse.com/#search=user-select itu seharusnya berfungsi di browser pengguna normal lainnya saat ini.

Secara kebiasaan, di Chrome 68 itu diwarisi oleh elemen anak, dan tidak mengizinkan pemilihan teks yang berisi elemen bahkan ketika teks di sekitar dan termasuk elemen dipilih.

Untuk mencegah IE 8 CTRL dan SHIFT klik pemilihan teks pada elemen individual

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

Untuk mencegah pemilihan teks pada dokumen

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

Saya memiliki masalah yang sama. Saya menyelesaikannya dengan beralih ke <a>dan menambahkan onclick="return false;"(sehingga mengkliknya tidak akan menambah entri baru ke riwayat browser).