Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > javascript melumpuhkan pemilihan

javascript melumpuhkan pemilihan

WBOY
Lepaskan: 2023-05-09 10:53:37
asal
2043 orang telah melayarinya

Dalam pembangunan web, kadangkala kita perlu melarang pengguna daripada memilih elemen tertentu dalam halaman web untuk memastikan ia tidak tertakluk kepada risiko seperti penyalinan haram. Pada masa ini, ciri Javascript yang sangat praktikal - melumpuhkan pemilihan menunjukkan kelebihannya.

Lumpuhkan pemilihan bermakna selepas memilih elemen pada halaman web, penyemak imbas tidak akan menyalin teks dan kandungan lain elemen ini ke papan keratan. Javascript boleh melaksanakan fungsi ini dengan sangat mudah. Kaedah

adalah seperti berikut:

// 防止选中文本
function disableSelection(element) {
    if (typeof element.onselectstart != 'undefined') {
        element.onselectstart = function() { return false; };
    } else if (typeof element.style.MozUserSelect != 'undefined') {
        element.style.MozUserSelect = 'none';
    } else {
        element.onmousedown = function() { return false; };
    }
}
// 调用示例
disableSelection(document.body);
Salin selepas log masuk

Fungsi fungsi ini adalah untuk melumpuhkan pemilihan pembolehubah elemen yang diluluskan. Jika elemen mempunyai set atribut onselectstart, tetapkannya kepada false untuk menghalang acara lalai yang dipilih daripada menyala. Jika harta itu tidak wujud, teruskan tentukan sama ada ia mempunyai sifat MozUserSelect. Jika atribut ini tidak ada sama ada, tetapkan onmousedown elemen kepada false.

Jika anda ingin menghalang elemen tertentu daripada dipilih, anda boleh menambah kelas yang boleh dipilih dengan teliti pada elemen dan mengatasi sifat MozUserSelect kelas itu.

Contoh kod adalah seperti berikut:

.careful-selectable {
    -moz-user-select: text !important;
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
Salin selepas log masuk

Dalam kod di atas, atribut untuk kelas tertentu ditetapkan kepada !important untuk memastikan bahawa tidak kira bagaimana elemen itu ditetapkan, ia tidak akan dipilih. Dengan menetapkan atribut pilihan pengguna, anda juga boleh melaksanakan fungsi lain seperti teks boleh dipilih tetapi penyalinan klik kanan dilarang.

Bukan sahaja anda boleh melumpuhkan pemilihan, Javascript juga boleh melumpuhkan penyalinan dan pemotongan melalui pengendali acara.

Kod adalah seperti berikut:

// 防止复制和剪切
function disableCopyAndCut(element) {
    element.addEventListener('copy', function(e) {
        e.preventDefault();
        console.log('禁止复制!');
    });
    element.addEventListener('cut', function(e) {
        e.preventDefault();
        console.log('禁止剪切!');
    });
}
// 调用示例
disableCopyAndCut(document.body);
Salin selepas log masuk

Dalam kod di atas, kami mula-mula menghantar parameter elemen, dan kemudian menambah pendengar untuk menyalin dan memotong acara elemen masing-masing. Dalam kedua-dua kes, kami menggunakan kaedah preventDefault() untuk menghalang tingkah laku lalai daripada dicetuskan, dengan itu melumpuhkan penyalinan dan pemotongan.

Ringkasnya, melumpuhkan operasi seperti pemilihan, penyalinan dan pemotongan dalam Javascript adalah sangat mudah Anda hanya perlu menetapkan beberapa sifat atau pengendali acara untuk elemen tertentu. Apabila membangunkan halaman web, jika maklumat sensitif seperti hak cipta dan privasi terlibat, operasi seperti melumpuhkan pemilihan adalah penting.

Atas ialah kandungan terperinci javascript melumpuhkan pemilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan