JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法
更新時(shí)間:2013年07月18日 16:50:13 作者:
這篇文章介紹了JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法,有需要的朋友可以參考一下
復(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;
上面的代碼在谷歌和搜狐瀏覽器中獲取的值會(huì)不準(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實(shí)時(shí)獲取鼠標(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)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
- JS獲取鼠標(biāo)坐標(biāo)、獲取鼠標(biāo)像素點(diǎn)示例
- JS onmousemove鼠標(biāo)移動(dòng)坐標(biāo)接龍DIV效果實(shí)例
- 在頁面中js獲取光標(biāo)/鼠標(biāo)的坐標(biāo)及光標(biāo)的像素坐標(biāo)
- js獲得鼠標(biāo)的坐標(biāo)值的方法
- js 獲取坐標(biāo) 通過JS得到當(dāng)前焦點(diǎn)(鼠標(biāo))的坐標(biāo)屬性
- JS獲取鼠標(biāo)坐標(biāo)位置實(shí)例分析
相關(guān)文章
JavaScript基礎(chǔ)篇(6)之函數(shù)表達(dá)式閉包
這篇文章主要介紹了javascript基礎(chǔ)篇(6)之函數(shù)表達(dá)式閉包的相關(guān)資料,需要的朋友可以參考下2015-12-12小程序?qū)崿F(xiàn)文字循環(huán)滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)文字循環(huán)滾動(dòng)動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06教你如何在 Javascript 文件里使用 .Net MVC Razor 語法
文章主要是介紹了通過一個(gè)第三方類庫RazorJS,實(shí)現(xiàn)Javascript 文件里使用 .Net MVC Razor 語法,很巧妙,推薦給大家2014-07-07Javascript 檢測鍵盤按鍵信息及鍵碼值對應(yīng)介紹
Javascript中有3個(gè)事件句柄在對應(yīng)鍵盤的輸入狀態(tài):按鍵被按下(按下按鍵但還沒有抬起)、點(diǎn)擊按鍵(按下并抬起按鍵)、按鍵抬起(按鍵抬起之后),接下來詳細(xì)介紹,感興趣的朋友可以了解下2013-01-01JavaScript實(shí)現(xiàn)商品放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)商品放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10javascript實(shí)現(xiàn)的猜數(shù)小游戲完整實(shí)例代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)的猜數(shù)小游戲,游戲中用戶共有10次猜測機(jī)會(huì),并且每次都有不同的提示信息,該游戲涉及javascript流程控制與數(shù)值運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2016-05-05