Bagaimana untuk mendapatkan kedudukan tetikus dalam javascript

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 dc6dce4a544fdca2df29d5ac0ea9906b dan kedudukannya diimbangi oleh (10,20) ke kanan bawah tetikus penunjuk. Memandangkan model acara DOM menghantar objek acara dalam bentuk parameter, jangan lupa untuk lulus objek acara dalam fungsi panggilan.

复制纯文本复制

<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!