首頁 > 文章 > web前端 > javascript怎麼取得指標的位置

javascript怎麼取得指標的位置

王林原創: 2021-10-25 14:47:242780瀏覽

javascript取得指標的位置的方法：使用事件物件的pageX和pageY，或是clientX和clientY屬性，並且配合scrollLeft和scrollTop屬性，這樣就可以計算出指標的位置了。

javascript怎麼取得指標的位置

本文操作環境：windows10系統、javascript 1.8.5、thinkpad t480電腦。

要想取得指標在頁面中的位置，可以使用事件物件的pageX和pageY，或是clientX 和clientY（相容IE）屬性，同時還需要配合scrollLeft 和scrollTop 屬性，這樣就可以計算出滑鼠指標在頁面中的位置了。

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

pageX 和 pageY 事件屬性不被 IE 瀏覽器支持，而 clientX 和 clientY 事件屬性又不被 Safari 瀏覽器支持，因此可以混合使用它們以相容於不同瀏覽器。對於怪異模式來說，body 元素代表頁面區域，而 html 元素被隱藏，但是標準模式以 html 元素代表頁面區域，而 body 元素僅是一個獨立的頁面元素，所以需要與這兩種解析方式相容。

下面範例示範如何呼叫上面擴充函數 getMP() 擷取目前滑鼠指標在文件中的位置。

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

示範效果如下：

javascript怎麼取得指標的位置

取得指標的相對位置

使用offsetX 和offsetY 或layerX 和layerY 可以取得滑鼠指標相對定位包含框的偏移位置。如果使用 offsetLeft 和 offsetTop 屬性取得元素在定位包含框中的偏移座標，然後使用 layerx 屬性值減去 offsetLeft 屬性值，使用 layery 屬性值減去 offsetTop 屬性值，即可取得滑鼠指標在元素內部的位置。

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

在實務上上面函數有以下兩個問題：

Mozilla 類型和 Safari 瀏覽器以元素邊框外壁的左上角為參考點。
其他瀏覽器則是以元素邊框內壁的左上角為座標原點。

考慮到邊框對滑鼠位置的影響，當元素邊框很寬時，必須考慮如何消除邊框對於滑鼠位置的影響。但是，由於邊框樣式不同，它存在 3 像素的預設寬度，為獲取元素的邊框實際寬度帶來了麻煩。需要設定更多的條件，來判斷目前元素的邊框寬度。

範例

完善後的取得滑鼠指標在元素內的位置擴充函數如下：

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

示範效果如下：

javascript怎麼取得指標的位置

推薦學習：javascript影片教學

以上是javascript怎麼取得指標的位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript怎麼檢測變數是否存在下一篇：javascript怎麼檢測變數是否存在

看更多