So ermitteln Sie die Position des Zeigers in Javascript-js-Tutorial-php.cn

So ermitteln Sie die Position des Zeigers in Javascript

王林

Freigeben： 2021-10-25 14:47:24

Original

2778 Leute haben es durchsucht

So ermitteln Sie die Position des Zeigers in JavaScript: Verwenden Sie die Attribute pageX und pageY oder clientX und clientY des Ereignisobjekts und arbeiten Sie mit den Attributen scrollLeft und scrollTop zusammen, damit die Position des Zeigers berechnet werden kann.

So ermitteln Sie die Position des Zeigers in Javascript

Die Betriebsumgebung dieses Artikels: Windows 10-System, Javascript 1.8.5, Thinkpad T480-Computer.

Um die Position des Zeigers auf der Seite zu ermitteln, können Sie die Eigenschaften pageX und pageY des Ereignisobjekts oder die Eigenschaften clientX und clientY (kompatibel mit IE) verwenden. Sie müssen also auch mit den Eigenschaften scrollLeft und scrollTop zusammenarbeiten dass Sie die Position des Mauszeigers auf der Seite berechnen können.

//获取鼠标指针的页面位置
//参数：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)
    }
}

Nach dem Login kopieren

pageX- und pageY-Ereignisattribute werden vom IE-Browser nicht unterstützt, und clientX- und clientY-Ereignisattribute werden vom Safari-Browser nicht unterstützt, sodass sie gemischt werden können, um mit verschiedenen Browsern kompatibel zu sein. Im seltsamen Modus stellt das Body-Element den Seitenbereich dar und das HTML-Element ist ausgeblendet. Im Standardmodus stellt das HTML-Element jedoch den Seitenbereich dar und das Body-Element ist nur ein unabhängiges Seitenelement, daher gibt es zwei Analysemethoden müssen kompatibel sein.

Das folgende Beispiel zeigt, wie die obige Erweiterungsfunktion getMP() aufgerufen wird, um die aktuelle Mauszeigerposition im Dokument zu erfassen.

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

Nach dem Login kopieren

Der Demonstrationseffekt ist wie folgt:

So ermitteln Sie die Position des Zeigers in Javascript

Ermitteln Sie die relative Position des Zeigers.

Verwenden Sie offsetX und offsetY oder LayerX und LayerY, um die Versatzposition des Mauszeigers relativ zum enthaltenden Feld zu ermitteln. Wenn Sie die Attribute „offsetLeft“ und „offsetTop“ verwenden, um die Versatzkoordinaten des Elements im Positionierungsfeld zu erhalten, dann den Attributwert „layerx“ abzüglich des Attributwerts „offsetLeft“ und den Attributwert „layery“ abzüglich des Attributwerts „offsetTop“ verwenden, können Sie Folgendes erhalten: Position des Mauszeigers innerhalb des Elements.

//获取鼠标指针在元素内的位置
//参数：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)
    }
}

Nach dem Login kopieren

In der Praxis weist die obige Funktion die folgenden zwei Probleme auf:

Mozilla-Typ und Safari-Browser verwenden die obere linke Ecke der Außenwand des Elementrahmens als Referenzpunkt.
Andere Browser verwenden die obere linke Ecke der Innenwand des Elementrandes als Koordinatenursprung.

Angesichts der Auswirkungen des Rahmens auf die Mausposition müssen Sie bei einem sehr breiten Elementrahmen überlegen, wie Sie den Einfluss des Rahmens auf die Mausposition beseitigen können. Aufgrund der unterschiedlichen Rahmenstile hat es jedoch eine Standardbreite von 3 Pixeln, was es schwierig macht, die tatsächliche Breite des Elementrands zu ermitteln. Es müssen weitere Bedingungen festgelegt werden, um die Rahmenbreite des aktuellen Elements zu bestimmen.

Beispiel

Die verbesserte Erweiterungsfunktion zum Ermitteln der Position des Mauszeigers innerhalb des Elements lautet wie folgt:

//完善获取鼠标指针在元素内的位置
//参数：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 
    }   
}

Nach dem Login kopieren

Der Demonstrationseffekt ist wie folgt:

So ermitteln Sie die Position des Zeigers in Javascript

Empfohlenes Lernen: Javascript-Video-Tutorial

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