JS獲取鼠標坐標的實例方法
更新時間：2013年07月18日 16:50:13 作者：
這篇文章介紹了JS獲取鼠標坐標的實例方法，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
var restrictX;
var restrictY;
var tip;
// 鼠標坐標
function mousePosition(ev) {
return {
x : ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
y : ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
};
}
// 鼠標事件
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 restrictX;
var restrictY;
var tip;
// 鼠標坐標
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
};
}
// 鼠標事件
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;
這兩句為，如果能獲取到鼠標坐標，則去前面，否則用后面的方法獲取鼠標坐標，“|| ”后面的是給WebKit 內(nèi)核的瀏覽器使用
您可能感興趣的文章:
相關(guān)文章
jquery插件bootstrapValidator數(shù)據(jù)驗證詳解
這篇文章主要為大家詳細介紹了jquery插件bootstrapValidator數(shù)據(jù)驗證使用教程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
超強推薦的js編程中的簡潔寫法收集...2007-08-08
這篇文章主要介紹了JS 事件機制,結(jié)合完整實例形式分析了JavaScript事件響應(yīng)機制、原理與使用技巧,需要的朋友可以參考下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)顯示當前日期功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
10個實用的腳本工具，其實就是將代碼拷貝到IE地址欄中運行2010-05-05