Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mendapatkan kedudukan penunjuk dalam javascript
Bagaimana untuk mendapatkan kedudukan penunjuk dalam javascript
- 王林asal
- 2021-10-25 14:47:242825semak imbas
Cara untuk mendapatkan kedudukan penunjuk dalam JavaScript: gunakan atribut pageX dan pageY, atau clientX dan clientY bagi objek acara dan bekerjasama dengan atribut scrollLeft dan scrollTop, supaya kedudukan penunjuk boleh dikira.
Persekitaran pengendalian artikel ini: sistem windows10, javascript 1.8.5, komputer thinkpad t480.
Untuk mendapatkan kedudukan penuding pada halaman, anda boleh menggunakan pageX dan pageY objek acara, atau sifat clientX dan clientY (serasi dengan IE) Anda juga perlu bekerjasama dengan scrollLeft dan sifat scrollTop, supaya anda boleh mengira Kedudukan penunjuk tetikus pada halaman.
//获取鼠标指针的页面位置
//参数：e表示当前事件对象
//返回值：返回鼠标相对页面的坐标，对象格式（x，y）
function getMP (e) {
var e = e || window.event;
return {
x : e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft),
y : e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)
}
}atribut acara pageX dan pageY tidak disokong oleh penyemak imbas IE, dan atribut acara clientX dan clientY tidak disokong oleh penyemak imbas Safari, jadi ia boleh dicampur untuk serasi dengan penyemak imbas yang berbeza. Untuk mod pelik, elemen badan mewakili kawasan halaman, dan elemen html disembunyikan, tetapi dalam mod standard, elemen html mewakili kawasan halaman, dan elemen badan hanya elemen halaman bebas, jadi dua kaedah penghuraian perlu serasi.
Contoh berikut menunjukkan cara memanggil fungsi sambungan di atas getMP() untuk menangkap kedudukan penuding tetikus semasa dalam dokumen.
<body style="width:2000px;height:2000px;">
<textarea id="t" cols="15" rows="4" style="position:fixed;left:50px;top:50px;"></textarea>
</body>
<script>
var t = document.getElementById("t");
document.onmousemove = function(e){
var m = getMP(e);
t.value ="mouseX = " + m.x + "\n" + "mouseY = " + m.y
}
</script>Kesan tunjuk cara adalah seperti berikut:
Dapatkan kedudukan relatif penuding
Gunakan offsetX dan offsetY atau layerX dan layerY untuk mendapatkan tetikus Penunjuk diposisikan relatif kepada offset kotak yang mengandungi. Jika anda menggunakan atribut offsetLeft dan offsetTop untuk mendapatkan koordinat offset bagi elemen dalam kotak yang mengandungi kedudukan, kemudian gunakan nilai atribut layerx tolak nilai atribut offsetLeft dan gunakan nilai atribut layery tolak nilai atribut offsetTop, anda boleh mendapatkan kedudukan penunjuk tetikus di dalam elemen.
//获取鼠标指针在元素内的位置
//参数：e表示当前事件对象，o表示当前元素
//返回值：返回相对坐标对象
function getME (e, o) {
var e = e || window.event;
return {
x : e.offsetX || (e.layerX - o.offsetLeft),
y : e.offsetY || (e.layerY - o.offsetTop)
}
}Dalam amalan, fungsi di atas mempunyai dua masalah berikut:
Jenis Mozilla dan penyemak imbas Safari menggunakan sudut kiri atas dinding luar elemen sempadan sebagai titik rujukan.
Pelayar lain menggunakan penjuru kiri sebelah atas dinding dalam sempadan unsur sebagai asal koordinat.
Memandangkan kesan sempadan pada kedudukan tetikus, apabila sempadan elemen sangat luas, anda mesti mempertimbangkan cara untuk menghapuskan kesan sempadan pada kedudukan tetikus. Walau bagaimanapun, disebabkan oleh gaya sempadan yang berbeza, ia mempunyai lebar lalai sebanyak 3 piksel, yang menyusahkan untuk mendapatkan lebar sebenar sempadan elemen. Lebih banyak syarat perlu ditetapkan untuk menentukan lebar sempadan unsur semasa.
Contoh
Fungsi sambungan yang dipertingkatkan untuk mendapatkan kedudukan penuding tetikus dalam elemen adalah seperti berikut:
//完善获取鼠标指针在元素内的位置
//参数：e表示当前事件对象，o表示当前元素
//返回值：返回鼠标相对元素的坐标位置，其中x表示x轴偏移距离，y表示y轴偏移距离
function getME(e, o){
var e = e || window.event;
//获取元素左侧边框的宽度
//调用getStyle()扩展函数获取边框样式值，并尝试转换为数值，如果转换成功，则赋值。
//否则判断是否定义了边框样式，如果定义边框样式，且值不为none，则说明边框宽度为默认值，即为3像素。
//如果没有定义边框样式，且宽度值为auto，则说明边框宽度为0
var bl = parseInt(getStyle(o, "borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none" )? 3 : 0);
//获取元素顶部边框的宽度，设计思路与获取左侧边框方法相同
var bt = parseInt(getStyle(o, "borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle !="none" ) ? 3 : 0);
var x = e.offsetX || (e.layerX - o.offsetLeft - bl); // 一般浏览器下鼠标偏移值
//兼容Mozilla类型浏览器，减去边框宽度
var y = e.offsetY || (e.layerY - o.offsetTop - bt); // 一般浏览器下鼠标偏移值
//兼容Mozilla类型浏览器，减去边框宽度
var u = navigator.userAgent; // 获取浏览器的用户数据
if( (u.indexOf("KHTML") > - 1) ||(u.indexOf("Konqueror") > - 1) || (u.indexOf("AppleWebKit") > - 1)
){ // 如果是Safari浏览器，则减去边框的影响
x -= bl; y -= bt;
} return { // 返回兼容不同浏览器的鼠标位置对象，以元素边框内壁左上角为定位原点
x : x, y : y
}
}Kesan demonstrasi adalah seperti berikut:
Pembelajaran yang disyorkan: tutorial video javascript
Atas ialah kandungan terperinci Bagaimana untuk mendapatkan kedudukan penunjuk dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!