How to get the position of the pointer in javascript-JS Tutorial-php.cn

How to get the position of the pointer in javascript

王林

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

Original

2796 people have browsed it

Javascript method to get the position of the pointer: use the pageX and pageY, or clientX and clientY attributes of the event object, and cooperate with the scrollLeft and scrollTop attributes, so that the position of the pointer can be calculated.

How to get the position of the pointer in javascript

#The operating environment of this article: windows10 system, javascript 1.8.5, thinkpad t480 computer.

To get the position of the pointer in the page, you can use the pageX and pageY of the event object, or the clientX and clientY (compatible with IE) properties. You also need to cooperate with the scrollLeft and scrollTop properties, so that you can calculate The position of the mouse pointer on the page.

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

Copy after login

pageX and pageY event attributes are not supported by IE browser, and clientX and clientY event attributes are not supported by Safari browser, so they can be mixed to be compatible with different browsers. For the weird mode, the body element represents the page area, and the html element is hidden, but in the standard mode, the html element represents the page area, and the body element is only an independent page element, so the two parsing methods need to be compatible.

The following example demonstrates how to call the above extension function getMP() to capture the current mouse pointer position in the 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>

Copy after login

The demonstration effect is as follows:

How to get the position of the pointer in javascript

Get the relative position of the pointer

Use offsetX and offsetY or layerX and layerY to get the relative position of the mouse pointer Position the offset position of the containing box. If you use the offsetLeft and offsetTop attributes to get the offset coordinates of the element in the positioning containing box, then use the layerx attribute value minus the offsetLeft attribute value, and use the layery attribute value minus the offsetTop attribute value, you can get the position of the mouse pointer inside the element.

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

Copy after login

In practice, the above function has the following two problems:

Mozilla type and Safari browser use the upper left corner of the outer wall of the element border as the reference point.
Other browsers use the upper left corner of the inner wall of the element border as the coordinate origin.

Considering the impact of the border on the mouse position, when the element border is very wide, you must consider how to eliminate the impact of the border on the mouse position. However, due to the different border styles, it has a default width of 3 pixels, which makes it troublesome to get the actual width of the element's border. More conditions need to be set to determine the border width of the current element.

Example

The improved extension function to obtain the position of the mouse pointer within the element is as follows:

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

Copy after login

The demonstration effect is as follows:

How to get the position of the pointer in javascript

Recommended learning: javascript video tutorial

The above is the detailed content of How to get the position of the pointer in javascript. For more information, please follow other related articles on the PHP Chinese website!