Pertanyaan Cegah seleksi dalam HTML


Saya memiliki div di halaman HTML dan setiap kali saya menekan mouse dan memindahkannya, itu akan menunjukkan bahwa kursor "tidak bisa drop" seperti itu memilih sesuatu. Apakah ada cara untuk menonaktifkan seleksi? Saya mencoba CSS pengguna-pilih tanpa ada yang berhasil.


75
2018-02-24 12:41


asal


Jawaban:


Variasi kepemilikan user-select akan berfungsi di sebagian besar peramban modern:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Untuk IE <10 dan Opera, Anda harus menggunakan unselectable atribut dari elemen yang Anda inginkan menjadi tidak dapat dipilih. Anda dapat mengatur ini menggunakan atribut dalam HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Sayangnya properti ini tidak diwariskan, artinya Anda harus meletakkan atribut di tag awal dari setiap elemen di dalam <div>. Jika ini adalah masalah, Anda bisa menggunakan JavaScript untuk melakukan ini secara rekursif untuk turunan elemen:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

150
2018-02-24 12:45



Sepertinya CSS user-select tidak mencegah drag dan drop gambar ... jadi ..

HTML:

<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla

CSS:

* {
     user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }

JS:

$(function(){
    $('*:[unselectable=on]').mousedown(function(event) {
        event.preventDefault();
        return false;
    });
});

10
2018-03-25 17:11



saya menggunakan cancelBubble=true dan stopPropagation() di mouse ke bawah dan pindahkan penangan.


5
2018-02-24 13:53



event.preventDefault() tampaknya melakukan trik (diuji di IE7-9 dan Chrome):

jQuery('#slider').on('mousedown', function (e) {
    var handler, doc = jQuery(document);
    e.preventDefault();
    doc.on('mousemove', handler = function (e) {
        e.preventDefault();
        // refresh your screen here
    });
    doc.one('mouseup', function (e) {
        doc.off('mousemove', handler);
    });
});

4
2018-05-22 15:29



Apakah Anda punya semacam gambar transparan yang Anda pilih? Biasanya ikon "cant drop" muncul saat Anda menyeret gambar. Kalau tidak biasanya memilih teks ketika Anda menyeret. Jika demikian Anda mungkin harus meletakkan gambar di balik segala sesuatu menggunakan z-index.


1
2018-02-24 12:46