Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >javascript melumpuhkan pemilihan
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);
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; }
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);
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!