Bagaimana untuk menghalang tetikus daripada bergerak di luar badan dalam javascript-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menghalang tetikus daripada bergerak di luar badan dalam javascript

PHPz

Lepaskan： 2023-04-24 16:09:36

asal

763 orang telah melayarinya

Bagaimana untuk menghalang tetikus daripada bergerak di luar javascript badan

Dengan perkembangan pesat Internet, reka bentuk halaman web menjadi semakin kompleks Untuk memberikan pengguna pengalaman yang baik, kita selalunya perlu melakukan beberapa butiran Pengoptimuman, seperti apabila tetikus bergerak di luar halaman, tetikus tidak boleh melebihi skop halaman, yang sangat diperlukan dalam beberapa senario aplikasi. Cara untuk mencapai kesan ini adalah melalui JavaScript. Dalam artikel ini, kita akan membincangkan cara menggunakan JavaScript untuk menghalang tetikus daripada bergerak di luar badan.

Untuk mencapai kesan ini, kita perlu menggunakan beberapa acara dan kaedah JavaScript. Mula-mula, kita perlu menggunakan acara onmousemove untuk memantau pergerakan tetikus pada halaman, dan kemudian menggunakan kaedah clientX dan clientY untuk mendapatkan koordinat tetikus pada halaman. Seterusnya, kita perlu menggunakan kaedah offsetWidth dan offsetHeight untuk mendapatkan lebar dan ketinggian halaman, supaya kita boleh mengira sama ada tetikus melebihi skop halaman Jika ia berlaku, kita perlu menetapkan koordinat tetikus untuk berada di tepi halaman.

Berikut ialah contoh kod yang menunjukkan cara menggunakan JavaScript untuk menghalang tetikus daripada bergerak di luar badan:

<body onmousemove="checkCursor(event)">
    <div>
        <p>Some content here.</p>
    </div>
    <script>
        function checkCursor(e) {
            e = e || window.event;
            var body = document.body;
            var x = e.clientX;
            var y = e.clientY;
            var width = body.offsetWidth;
            var height = body.offsetHeight;
 
            if (x < 0) {
                x = 0;
            } else if (x > width) {
                x = width;
            }
 
            if (y < 0) {
                y = 0;
            } else if (y > height) {
                y = height;
            }
 
            body.style.cursor = 'crosshair';
            body.style.cursor = 'none';
            console.log(x, y);
        }
    </script>
</body>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan acara onmousemove Untuk pantau pergerakan tetikus dan kira koordinat tetikus dalam fungsi checkCursor. Jika tetikus melebihi skop halaman, kami menetapkan koordinat tetikus berada di pinggir halaman dan menetapkan penuding tetikus kepada body dengan mengubah suai gaya CSS elemen none, supaya pengguna tidak boleh bergerak di luar halaman.

Ringkasnya, adalah sangat perlu untuk melarang tetikus daripada bergerak di luar badan, terutamanya dalam beberapa senario aplikasi yang sangat interaktif. Dengan menggunakan JavaScript, kita boleh mencapai kesan ini dengan mudah. Sudah tentu, cara melaksanakannya masih perlu diselaraskan dan dioptimumkan mengikut situasi sebenar untuk mencapai pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menghalang tetikus daripada bergerak di luar badan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!