Comment obtenir la position du pointeur en javascript-js tutoriel-php.cn

Comment obtenir la position du pointeur en javascript

王林

Libérer： 2021-10-25 14:47:24

original

2756 Les gens l'ont consulté

Comment obtenir la position du pointeur en JavaScript : utilisez les attributs pageX et pageY, ou clientX et clientY de l'objet événement, et coopérez avec les attributs scrollLeft et scrollTop, afin que la position du pointeur puisse être calculée.

Comment obtenir la position du pointeur en javascript

L'environnement d'exploitation de cet article : système windows10, javascript 1.8.5, ordinateur thinkpad t480.

Pour obtenir la position du pointeur sur la page, vous pouvez utiliser les propriétés pageX et pageY de l'objet événement, ou les propriétés clientX et clientY (compatibles avec IE). Vous devez également coopérer avec les propriétés scrollLeft et scrollTop, donc. que vous pouvez calculer la position du pointeur de la souris sur la page dans la position.

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

Copier après la connexion

Les attributs d'événement pageX et pageY ne sont pas pris en charge par le navigateur IE, et les attributs d'événement clientX et clientY ne sont pas pris en charge par le navigateur Safari, ils peuvent donc être mélangés pour être compatibles avec différents navigateurs. Pour le mode bizarre, l'élément body représente la zone de la page et l'élément html est masqué, mais dans le mode standard, l'élément html représente la zone de la page et l'élément body n'est qu'un élément de page indépendant, donc les deux méthodes d'analyse doivent être compatibles.

L'exemple suivant montre comment appeler la fonction d'extension ci-dessus getMP() pour capturer la position actuelle du pointeur de la souris dans le document.

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

Copier après la connexion

L'effet de démonstration est le suivant :

Comment obtenir la position du pointeur en javascript

Obtenez la position relative du pointeur

Utilisez offsetX et offsetY ou layerX et layerY pour obtenir la position de décalage du pointeur de la souris par rapport à la boîte contenant. Si vous utilisez les attributs offsetLeft et offsetTop pour obtenir les coordonnées de décalage de l'élément dans la boîte contenant le positionnement, puis utilisez la valeur de l'attribut layerx pour soustraire la valeur de l'attribut offsetLeft et utilisez la valeur de l'attribut layery pour soustraire la valeur de l'attribut offsetTop, vous pouvez obtenir la position du pointeur de la souris à l'intérieur de l'élément.

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

Copier après la connexion

En pratique, la fonction ci-dessus présente les deux problèmes suivants :

Le type Mozilla et le navigateur Safari utilisent le coin supérieur gauche de la paroi extérieure de la bordure de l'élément comme point de référence.
D'autres navigateurs utilisent le coin supérieur gauche de la paroi intérieure de la bordure de l'élément comme origine des coordonnées.

Considérant l'impact de la bordure sur la position de la souris, lorsque la bordure de l'élément est très large, vous devez réfléchir à la manière d'éliminer l'impact de la bordure sur la position de la souris. Cependant, en raison des différents styles de bordure, sa largeur par défaut est de 3 pixels, ce qui rend difficile l'obtention de la largeur réelle de la bordure de l'élément. D'autres conditions doivent être définies pour déterminer la largeur de la bordure de l'élément actuel.

Exemple

La fonction étendue améliorée pour obtenir la position du pointeur de la souris dans un élément est la suivante :

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

Copier après la connexion

L'effet de démonstration est le suivant :

Comment obtenir la position du pointeur en javascript