JS獲取鼠標(biāo)坐標(biāo)的實例方法
更新時間：2013年07月18日 16:50:13 作者：
這篇文章介紹了JS獲取鼠標(biāo)坐標(biāo)的實例方法，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
var restrictX;
var restrictY;
var tip;
// 鼠標(biāo)坐標(biāo)
function mousePosition(ev) {
return {
x : ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
y : ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
};
}
// 鼠標(biāo)事件
function mouseMove(ev) {
ev = ev || window.event;
var mousePos = mousePosition(ev);
restrictX = mousePos.x;
restrictY = mousePos.y;
}
document.onmousemove = mouseMove;
document.onclick = mouseMove;
上面的代碼在谷歌和搜狐瀏覽器中獲取的值會不準(zhǔn)確，需進(jìn)行修改，如下：
復(fù)制代碼 代碼如下:
var restrictX;
var restrictY;
var tip;
// 鼠標(biāo)坐標(biāo)
function mousePosition(ev){
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return {
x:ev.clientX + scrollLeft - document.documentElement.clientLeft,
y:ev.clientY + scrollTop - document.documentElement.clientTop
};
}
// 鼠標(biāo)事件
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
restrictX = mousePos.x;
restrictY = mousePos.y;
}
document.onmousemove = mouseMove;
document.onclick = mouseMove;
復(fù)制代碼 代碼如下:
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
這兩句為，如果能獲取到鼠標(biāo)坐標(biāo)，則去前面，否則用后面的方法獲取鼠標(biāo)坐標(biāo)，“|| ”后面的是給WebKit 內(nèi)核的瀏覽器使用
您可能感興趣的文章:
- js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
- javascript實時獲取鼠標(biāo)坐標(biāo)值并顯示的方法
- js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法
- JS網(wǎng)頁在線獲取鼠標(biāo)坐標(biāo)值的方法
- javascript獲取當(dāng)前鼠標(biāo)坐標(biāo)的方法
- JavaScript獲取鼠標(biāo)移動時的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
- JS獲取鼠標(biāo)坐標(biāo)、獲取鼠標(biāo)像素點示例
- JS onmousemove鼠標(biāo)移動坐標(biāo)接龍DIV效果實例
- 在頁面中js獲取光標(biāo)/鼠標(biāo)的坐標(biāo)及光標(biāo)的像素坐標(biāo)
- js獲得鼠標(biāo)的坐標(biāo)值的方法
- js 獲取坐標(biāo) 通過JS得到當(dāng)前焦點(鼠標(biāo))的坐標(biāo)屬性
- JS獲取鼠標(biāo)坐標(biāo)位置實例分析
相關(guān)文章
jquery插件bootstrapValidator數(shù)據(jù)驗證詳解
這篇文章主要為大家詳細(xì)介紹了jquery插件bootstrapValidator數(shù)據(jù)驗證使用教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
超強(qiáng)推薦的js編程中的簡潔寫法收集...2007-08-08
這篇文章主要介紹了JS 事件機(jī)制,結(jié)合完整實例形式分析了JavaScript事件響應(yīng)機(jī)制、原理與使用技巧,需要的朋友可以參考下2020-01-01
JavaScript高級程序設(shè)計 閱讀筆記（十九） js表格排序
js表格排序?qū)崿F(xiàn)代碼，需要的朋友可以參考下2012-08-08
今天看了rank的一篇javascript腳本控件topic，突然想總結(jié)一下一些寫JS組件的方法，或者說一些不同人的不同coding style。2010-09-09
這篇文章主要介紹了JS繼承定義與使用方法,結(jié)合完整實例形式分析了JavaScript繼承的基本定義、用法及操作注意事項,需要的朋友可以參考下2020-02-02
JavaScript代碼輕松實現(xiàn)網(wǎng)頁內(nèi)容禁止復(fù)制(代碼簡單)
有些時候我們寫的內(nèi)容不想被別人復(fù)制，在代碼中怎么實現(xiàn)的呢？下面小編給大家介紹javascript代碼輕松實現(xiàn)網(wǎng)頁內(nèi)容禁止復(fù)制，感興趣的童鞋一起看看吧2015-10-10
下面小編就為大家?guī)硪黄肑S屏蔽頁面中的Enter按鍵提交表單的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
本文通過實例代碼給大家介紹了js實現(xiàn)顯示當(dāng)前日期功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
10個實用的腳本工具，其實就是將代碼拷貝到IE地址欄中運行2010-05-05