站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        javascript怎么獲取指針的位置

        javascript獲取指針的位置的方法:使用事件對象的pageX和pageY,或者clientX和clientY屬性,并且配合scrollLeft和scrollTop屬性,這樣就可以計算出指針的位置了。

        javascript怎么獲取指針的位置

        本文操作環(huán)境:windows10系統(tǒng)、javascript 1.8.5、thinkpad t480電腦。

        要想獲取指針在頁面中的位置,可以使用事件對象的pageX和pageY,或者是 clientX 和 clientY(兼容 IE)屬性,同時還需要配合 scrollLeft 和 scrollTop 屬性,這樣就可以計算出鼠標(biāo)指針在頁面中的位置了。

        //獲取鼠標(biāo)指針的頁面位置 //參數(shù):e表示當(dāng)前事件對象 //返回值:返回鼠標(biāo)相對頁面的坐標(biāo),對象格式(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 元素代表頁面區(qū)域,而 html 元素被隱藏,但是標(biāo)準(zhǔn)模式以 html 元素代表頁面區(qū)域,而 body 元素僅是一個獨立的頁面元素,所以需要兼容這兩種解析方式。

        下面示例演示了如何調(diào)用上面擴展函數(shù) getMP() 捕獲當(dāng)前鼠標(biāo)指針在文檔中的位置。

        <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 可以獲取鼠標(biāo)指針相對定位包含框的偏移位置。如果使用 offsetLeft 和 offsetTop 屬性獲取元素在定位包含框中的偏移坐標(biāo),然后使用 layerx 屬性值減去 offsetLeft 屬性值,使用 layery 屬性值減去 offsetTop 屬性值,即可得到鼠標(biāo)指針在元素內(nèi)部的位置。

        //獲取鼠標(biāo)指針在元素內(nèi)的位置 //參數(shù):e表示當(dāng)前事件對象,o表示當(dāng)前元素 //返回值:返回相對坐標(biā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)     } }

        在實踐中上面函數(shù)存在以下兩個問題:

        • Mozilla 類型和 Safari 瀏覽器以元素邊框外壁的左上角為參照點。

        • 其他瀏覽器則是以元素邊框內(nèi)壁的左上角為坐標(biāo)原點。

        考慮到邊框?qū)κ髽?biāo)位置的影響,當(dāng)元素邊框很寬時,必須考慮如何消除邊框?qū)τ谑髽?biāo)位置的影響。但是,由于邊框樣式不同,它存在 3 像素的默認(rèn)寬度,為獲取元素的邊框?qū)嶋H寬度帶來了麻煩。需要設(shè)置

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 91精品在线看| 2022国产精品最新在线| 久久99热精品| 亚洲av无码乱码国产精品fc2| 91探花国产综合在线精品| 国产精品福利自产拍在线观看| 午夜成人精品福利网站在线观看 | 中文字幕精品无码一区二区三区| 99在线精品免费视频| 国产a精品视频| 久久精品水蜜桃av综合天堂| 一本久久精品一区二区| 久久精品无码一区二区三区免费| 亚洲精品高清国产一久久| 91精品国产色综合久久| 久久精品夜夜夜夜夜久久| 亚洲国产精品无码久久一区二区| 日本午夜精品理论片A级APP发布| 国产亚洲精品不卡在线| 成人午夜精品亚洲日韩| 四虎精品成人免费永久| 国产精品青草久久久久婷婷 | 国产精品第12页| 久久精品国产久精国产思思| 亚洲AV成人精品网站在线播放 | 欧美国产精品久久高清| 久久国产乱子伦精品免费午夜| 国产精品免费看久久久香蕉 | 久久久久99精品成人片| 国产精品自在在线午夜福利| 国产精品国产AV片国产| 国产精品九九九| 国产亚洲精品线观看动态图| 精品国产一区二区22| 精品久久久久久无码免费| 精品亚洲一区二区三区在线观看 | 久久精品国产影库免费看| 久久最新精品国产| 精品综合久久久久久97超人| 免费欧美精品a在线| 欧美精品香蕉在线观看网|