JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法

更新時(shí)間：2013年07月18日 16:50:13 作者：

這篇文章介紹了JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法，有需要的朋友可以參考一下

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)核的瀏覽器使用

您可能感興趣的文章:

相關(guān)文章

jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證詳解
這篇文章主要為大家詳細(xì)介紹了jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證使用教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
超強(qiáng)推薦的js編程中的簡(jiǎn)潔寫法收集
超強(qiáng)推薦的js編程中的簡(jiǎn)潔寫法收集...
2007-08-08
JS 事件機(jī)制完整示例分析
這篇文章主要介紹了JS 事件機(jī)制,結(jié)合完整實(shí)例形式分析了JavaScript事件響應(yīng)機(jī)制、原理與使用技巧,需要的朋友可以參考下
2020-01-01
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（十九） js表格排序
js表格排序?qū)崿F(xiàn)代碼，需要的朋友可以參考下
2012-08-08
Js組件的一些寫法
今天看了rank的一篇javascript腳本控件topic，突然想總結(jié)一下一些寫JS組件的方法，或者說一些不同人的不同coding style。
2010-09-09
JS繼承定義與使用方法簡(jiǎn)單示例
這篇文章主要介紹了JS繼承定義與使用方法,結(jié)合完整實(shí)例形式分析了JavaScript繼承的基本定義、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-02-02
JavaScript代碼輕松實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容禁止復(fù)制(代碼簡(jiǎn)單)
有些時(shí)候我們寫的內(nèi)容不想被別人復(fù)制，在代碼中怎么實(shí)現(xiàn)的呢？下面小編給大家介紹javascript代碼輕松實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容禁止復(fù)制，感興趣的童鞋一起看看吧
2015-10-10
利用JS屏蔽頁(yè)面中的Enter按鍵提交表單的方法
下面小編就為大家?guī)硪黄肑S屏蔽頁(yè)面中的Enter按鍵提交表單的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
JS實(shí)現(xiàn)顯示當(dāng)前日期的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了js實(shí)現(xiàn)顯示當(dāng)前日期功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-07-07
10個(gè)實(shí)用的腳本代碼工具
10個(gè)實(shí)用的腳本工具，其實(shí)就是將代碼拷貝到IE地址欄中運(yùn)行
2010-05-05