Kaedah JS untuk mendapatkan kedudukan tetikus: 1. Gunakan atribut clientX dan clientY; 2. Gunakan atribut offsetX dan offsetY; atribut layerY.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.
Dalam JavaScript, apabila sesuatu peristiwa berlaku, mendapatkan kedudukan tetikus adalah peristiwa yang sangat penting. Disebabkan ketidakserasian penyemak imbas, penyemak imbas yang berbeza mentakrifkan atribut yang berbeza dalam objek acara masing-masing Penerangan ditunjukkan dalam jadual berikut. Atribut ini mentakrifkan koordinat penuding tetikus dalam nilai piksel, tetapi kerana ia merujuk kepada sistem koordinat yang berbeza, adalah menyusahkan untuk mengira kedudukan tetikus dengan tepat.
属性 | 说明 | 兼容性 |
---|---|---|
clientX | 以浏览器窗口左上顶角为原点,定位 x 轴坐标 | 所有浏览器,不兼容 Safari |
clientY | 以浏览器窗口左上顶角为原点,定位 y 轴坐标 | 所有浏览器,不兼容 Safari |
offsetX | 以当前事件的目标对象左上顶角为原点,定位 x 轴坐标 | 所有浏览器,不兼容 Mozilla |
offsetY | 以当前事件的目标对象左上顶角为原点,定位 y 轴坐标 | 所有浏览器,不兼容 Mozilla |
pageX | 以 document 对象(即文档窗口)左上顶角为原点,定位 x 轴坐标 | 所有浏览器,不兼容 IE |
pageY | 以 document 对象(即文档窗口)左上顶角为原点,定位 y 轴坐标 | 所有浏览器,不兼容 IE |
screenX | 计算机屏幕左上顶角为原点,定位 x 轴坐标 | 所有浏览器 |
screenY | 计算机屏幕左上顶角为原点,定位 y 轴坐标 | 所有浏览器 |
layerX | 最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 x 轴坐标 | Mozilla 和 Safari |
layerY | 最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 y 轴坐标 | Mozilla 和 Safari |
Contoh 1
Berikut menerangkan cara menggunakan berbilang atribut koordinat tetikus bersama-sama untuk mencapai reka bentuk kedudukan tetikus yang serasi dengan penyemak imbas yang berbeza.
Mula-mula, mari kita lihat sifat screenX dan screenY. Kedua-dua atribut ini disokong oleh semua pelayar dan harus dikatakan sebagai atribut yang paling disukai, tetapi sistem koordinatnya ialah skrin komputer, iaitu, sudut kiri atas skrin komputer adalah asal kedudukan. Ini tidak mempunyai nilai untuk halaman web yang menggunakan tetingkap penyemak imbas sebagai ruang aktifnya. Kerana resolusi skrin yang berbeza, saiz dan kedudukan tetingkap pelayar yang berbeza menyukarkan untuk meletakkan tetikus pada halaman web.
Kedua, jika objek dokumen digunakan sebagai sistem koordinat, anda boleh mempertimbangkan untuk menggunakan atribut pageX dan pageY untuk mencapai kedudukan dalam tetingkap penyemak imbas. Ini adalah idea yang baik untuk mereka bentuk mengikut tetikus, kerana elemen berikut biasanya bergerak dalam tetingkap penyemak imbas dengan cara yang betul-betul diposisikan dalam pengendali acara mousemove, hantarkan nilai atribut pageX dan pageY ke bahagian atas dan kiri. elemen diposisikan secara mutlak.
Model acara IE tidak menyokong atribut di atas, jadi anda perlu mencari kaedah yang serasi dengan IE. Atribut clientX dan clientY adalah berdasarkan objek tetingkap sebagai sistem koordinat, dan model acara IE menyokongnya, jadi anda boleh memilihnya. Walau bagaimanapun, mempertimbangkan kemungkinan mengimbangi bar skrol objek seperti tetingkap, mengimbangi menatal halaman berbanding objek tetingkap juga harus ditambah.
var posX = 0, posY = 0; var event = event || window.event; if (event.pageX || event.pageY) { posX = event.pageX; posY = event.pageY; } else if (event.clientX || event.clientY) { posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; }
var posX = 0, posY = 0; var event = event || window.event; if (event.pageX || event.pageY) { posX = event.pageX; posY = event.pageY; } else if (event.clientX || event.clientY) { posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; }
Dalam kod di atas, semak dahulu sama ada atribut pageX dan pageY wujud, dan jika ia wujud, Dapatkan nilainya; jika ia tidak wujud, kesan dan dapatkan nilai atribut clientX dan clientY, dan kemudian tambahkan nilai atribut scrollLeft dan scrollTop bagi objek document.documentElement dan document.body, supaya koordinat yang sama nilai diperoleh dalam pelayar yang berbeza.
Contoh 2
Merangkumi kod kedudukan tetikus. Idea reka bentuk: Mengikut objek tertentu yang diluluskan dan pengimbangan relatif kepada penunjuk tetikus, objek boleh diarahkan untuk mengikuti pergerakan pemuliharaan air.
Mula-mula tentukan fungsi pembungkus Parameter input fungsi reka bentuk ialah penunjuk rujukan objek, jarak mengimbangi relatif kepada penunjuk tetikus dan objek peristiwa. Kemudian fungsi enkapsulasi boleh mendapatkan nilai koordinat tetikus berdasarkan objek acara, dan menetapkan objek kepada kedudukan mutlak Nilai kedudukan mutlak ialah nilai koordinat semasa penuding tetikus.
Kod enkapsulasi adalah seperti berikut:
var pos = function (o, x, y, event) { //鼠标定位赋值函数 var posX = 0, posY = 0; //临时变量值 var e = event || window.event; //标准化事件对象 if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值 posX = e.pageX; posY = e.pageY; } else if (e.clientX || e.clientY) { posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } o.style.position = "absolute"; //定义当前对象为绝对定位 o.style.top = (posY + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标 o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标 }
var pos = function (o, x, y, event) { //鼠标定位赋值函数 var posX = 0, posY = 0; //临时变量值 var e = event || window.event; //标准化事件对象 if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值 posX = e.pageX; posY = e.pageY; } else if (e.clientX || e.clientY) { posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } o.style.position = "absolute"; //定义当前对象为绝对定位 o.style.top = (posY + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标 o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标 }
Kod enkapsulasi ialah diuji di bawah. Daftarkan pengendali peristiwa pergerakan tetikus untuk objek dokumen dan masukkan dalam fungsi pengekapan kedudukan tetikus Objek yang dilalui ialah elemen
<div id="div1">鼠标追随</div> <script> var div1 = document.getElementById("div1"); document.onmousemove = function (event) { pos (div1, 10, 20, event); } </script>
<div id="div1">鼠标追随</div> <script> var div1 = document.getElementById("div1"); document.onmousemove = function (event) { pos (div1, 10, 20, event); } </script>
Contoh 3
Dapatkan tetikus penunjuk Koordinat dalam elemen. Ini boleh dicapai menggunakan sifat offsetX dan offsetY, tetapi tidak disokong oleh pelayar Mozilla. Anda boleh menggunakan atribut layerX dan layerY sebagai pilihan untuk serasi dengan pelayar Mozilla.
Kod reka bentuk adalah seperti berikut:
var event = event || window.event; if (event.offsetX || event.offsetY) { //适用非Mozilla浏览器 x = event.offsetX; y = event.offsetY; } else if (event.layerX || event.layerY) { //兼容Mozilla浏览器 x = event.layerX; y = event.layerY; }
var event = event || window.event; if (event.offsetX || event.offsetY) { //适用非Mozilla浏览器 x = event.offsetX; y = event.offsetY; } else if (event.layerX || event.layerY) { //兼容Mozilla浏览器 x = event.layerX; y = event.layerY; }
Walau bagaimanapun, lapisanX dan atribut layerY ialah Gunakan elemen induk yang diposisikan secara mutlak sebagai rujukan, bukan elemen itu sendiri. Jika tiada elemen induk yang diletakkan secara mutlak, objek dokumen akan digunakan sebagai rujukan. Untuk tujuan ini, anda boleh menambahkannya secara dinamik melalui skrip atau menambahkannya secara manual dan mereka bentuk elemen induk yang diposisikan mutlak mengelilingi lapisan luar elemen, yang boleh menyelesaikan isu keserasian penyemak imbas. Untuk mengambil kira ralat yang disebabkan oleh jarak antara elemen, adalah wajar untuk menolak offset 1 atau beberapa piksel.
Kod reka bentuk yang lengkap adalah seperti berikut:
<input type="text" id="text" /> <span style="position:absolute;"> <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div> </span> <script> var t = document.getElementById("text"); var div1 = document.getElementById("div1"); div1.onmousemove = function (event) { var event = event || window.event; //标准化事件对象 if (event.offsetX || event.offsetY) { t.value = event.offsetX + "" + event.offsetY; } else if (event.layerX || event.layerY) { t.value = (event.layerX-1) + "" + (event.layerY-1); } } </script>
<input type="text" id="text" /> <span style="position:absolute;"> <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div> </span> <script> var t = document.getElementById("text"); var div1 = document.getElementById("div1"); div1.onmousemove = function (event) { var event = event || window.event; //标准化事件对象 if (event.offsetX || event.offsetY) { t.value = event.offsetX + "" + event.offsetY; } else if (event.layerX || event.layerY) { t.value = (event.layerX-1) + "" + (event.layerY-1); } } </script>
Pendekatan ini boleh menyelesaikan masalah Masalah dengan meletakkan penunjuk tetikus di dalam elemen. Walau bagaimanapun, kerana elemen yang diletakkan secara mutlak dibalut di luar elemen, ia akan memusnahkan reka letak struktur keseluruhan halaman. Kaedah ini boleh dipertimbangkan pada premis untuk memastikan pendekatan buatan ini tidak akan menyebabkan kekeliruan dalam susun atur struktur.
[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]
Atas ialah kandungan terperinci Bagaimana untuk mendapatkan kedudukan tetikus dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan

JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Python lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Dreamweaver CS6
Alat pembangunan web visual

MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.