So ermitteln Sie die Mausposition in Javascript-js-Tutorial-php.cn

So erhalten Sie die Mausposition in JS: 1. Verwenden Sie die Attribute „clientX“ und „clientY“. 3. Verwenden Sie die Attribute „pageX“ und „pageY“. die Attribute „layerX“ und „layerY“.

So ermitteln Sie die Mausposition in Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Wenn in JavaScript ein Ereignis auftritt, ist das Ermitteln der Mausposition ein sehr wichtiges Ereignis. Aufgrund der Browser-Inkompatibilität definieren verschiedene Browser unterschiedliche Attribute in ihren jeweiligen Ereignisobjekten, wie in der folgenden Tabelle dargestellt. Diese Attribute definieren die Koordinaten des Mauszeigers in Pixelwerten. Da sie sich jedoch auf unterschiedliche Koordinatensysteme beziehen, ist es schwierig, die Position der Maus genau zu berechnen.

Das nächstgelegene absolut positionierte übergeordnete Element (oder Dokumentobjekt, falls keines vorhanden ist) ist die obere linke Ecke des Elements und positioniert die y-AchsenkoordinateMozilla und Safari

示例1

下面介绍如何配合使用多种鼠标坐标属性，以实现兼容不同浏览器的鼠标定位设计方案。

首先，来看看 screenX 和 screenY 属性。这两个属性获得了所有浏览器的支持，应该说是最优选用属性，但是它们的坐标系时计算机屏幕，也就是说，以计算机屏幕左上角为定位原点。这对于以浏览器窗口为活动空间的网页来说没有任何价值。因为不同的屏幕分辨率，不同的浏览器窗口大小和位置，都使得在网页中定位鼠标成为一件很困难的事情。

其次，如果以 document 对象为坐标系，则可以考虑选用 pageX 和 pageY 属性实现在浏览器窗口中进行定位。这对于设计鼠标跟随来说是一个好主意，因为跟随元素一般都以绝对定位的方式在浏览器窗口中移动，在 mousemove 事件处理函数中把 pageX 和 pageY 属性值传递给跟绝对定位元素的 top 和 left样式属性即可。

IE 事件模型不支持上面的属性，为此还需寻求兼容 IE 的方法。而看 clientX 和 clientY 属性是以 window 对象为坐标系，且 IE 事件模型支持它们，可以选用它们。不过考虑 window 等对象可能出现的滚动条偏移量，所以还应加上相对于 window 对象的页面滚动的偏移量。

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

在上面代码中，先检测 pageX 和 pageY 属性是否存在，如果存在则获取它们的值；如果不存在，则检测并获取 clientX 和 clientY 属性值，然后加上 document.documentElement 和 document.body 对象的 scrollLeft 和 scrollTop 属性值，这样在不同浏览器中就获得了相同的坐标值。

示例2

封装鼠标定位代码。设计思路：能够根据传递的具体对象，以及相对鼠标指针的偏移量，命令该对象能够跟随水保移动。

先定义一个封装函数，设计函数传入参数为对象引用指针、相对鼠标指针的偏移距离，以及事件对象。然后封装函数能够根据事件对象获取鼠标的坐标值，并设置该对象为绝对定位，绝对定位的值为鼠标指针当前的坐标值。

封装代码如下：

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轴坐标
}

Nach dem Login kopieren

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轴坐标
}

Nach dem Login kopieren

下面测试封装代码。为 document 对象注册鼠标移动事件处理函数，并传入鼠标定位封装函数，传入的对象为

元素，设置其位置向鼠标指针右下方偏移（10,20）的距离。考虑到 DOM 事件模型通过参数形式传递事件对象，所以不要忘记在调用函数中还要传递事件对象。

<div id="div1">鼠标追随</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>

Nach dem Login kopieren

<div id="div1">鼠标追随</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>

Nach dem Login kopieren

示例3

获取鼠标指针在元素内的坐标。使用 offsetX 和 offsetY 属性可以实现这样的目标，但是 Mozilla 浏览器不支持。可以选用 layerX 和 layerY 属性来兼容 Mozilla 浏览器。

设计代码如下：

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

但是，layerX 和 layerY 属性是以绝对定位的父元素为参照物，而不是元素自身。如果没有绝对定位的父元素，则会以 document 对象为参照物。为此，可以通过脚本动态添加或者手动添加的方式，设计在元素的外层包围一个绝对定位的父元素，这样可以解决浏览器兼容问题。考虑到元素之间的距离所造成的误差，可以适当减去 1 个或几个像素的偏移量。

完整设计代码如下：

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

Nach dem Login kopieren

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

Nach dem Login kopieren

这种做法能够解决在元素内部定位鼠标指针的问题。但是，由于在元素外面包裹了一个绝对定位的元素，会破坏整个页面的结构布局。在确保这种人为方式不会导致结构布局混乱的前提下，可以考虑选用这种方法。

【推荐学习：javascript高级教程】

Eigenschaften und ihre Kompatibilität positioniert das y- Achsenkoordinate: alle Browser, nicht kompatibel mit Safari
OffsetY	Verwenden Sie die obere linke Ecke des Zielobjekts des aktuellen Ereignisses als Ursprung und positionieren Sie die Y-Achsen-Koordinate.	Alle Browser, nicht kompatibel mit Mozilla.
SeiteX	Nehmen Sie die obere linke Ecke Ecke des Dokumentobjekts (d. h. des Dokumentfensters) als Ursprung, positionieren Sie die x-Achsen-Koordinate	Alle Browser, nicht kompatibel mit IE
pageY	Nehmen Sie die obere linke Ecke des Dokumentobjekts (d. h. des Dokuments). Fenster) als Ursprung, Positionieren Sie die y-Achsenkoordinate	für alle Browser, nicht kompatibel mit IE
screenX	Die obere linke Ecke des Computerbildschirms ist der Ursprung, positionieren Sie den Ursprung, positionieren Sie die y-Achsenkoordinate	Alle Browser
Schicht

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie die Mausposition in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!