快捷導(dǎo)航

JavaScript獲取鼠標(biāo)坐標(biāo)的函數(shù)（兼容IE、FireFox、Chrome）

更新時(shí)間：2010年01月13日 03:41:27 作者：

下午想做個(gè)鼠標(biāo)跟隨的JS腳本，發(fā)現(xiàn)瀏覽器兼容問題還真是煩人，還有滾動(dòng)條位置的問題。

還好網(wǎng)上什么都有，上網(wǎng)找了一個(gè)瀏覽器兼容性最佳的函數(shù)，經(jīng)測(cè)試兼容IE、FireFox、Chrome，并且不會(huì)有滾動(dòng)條誤差問題，存檔下，以備后用 :)

function mousePos(e){ 
    var x,y; 
    var e = e||window.event; 
    return { 
        x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, 
        y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop 
    }; 
}

注：此函數(shù)配合onmousemove事件使用。
函數(shù)出處：鼠標(biāo)跟隨提示框 by nunumick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠標(biāo)跟隨提示框</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body{font:12px/1.8 arial;} a,a:visited{color:#3366cc;text-decoration:none;} a:hover{color:#f60;text-decoration:underline;} .tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;} img{border:none;} </style>  </head> <body> <ol> <li> <a href="http://www.dbjr.com.cn/article/21812.htm" target="_blank"><img src="http://www.dbjr.com.cn/images/logo.gif" onmouseover="tip.start(this)" tips="JQuery獲取元素文檔大小、偏移和位置和滾動(dòng)條位置的 " /></a> </li> <li> <a href="http://www.dbjr.com.cn/article/21808.htm" target="_blank" onmouseover="tip.start(this)" tips="Javascript 實(shí)現(xiàn)TreeView CheckBox全選效果 ……">關(guān)于用戶研究的一點(diǎn)思考</a> </li> <li> <a href="http://www.dbjr.com.cn/article/21806.htm" target="_blank" onmouseover="tip.start(this)" tips="JavaScript 學(xué)習(xí)筆記（九）call和apply方法 ……">WEB重構(gòu)拾趣</a> </li> </ol> <div   class="vvxyksv9kd"   id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

Three.js?中的屏幕空間環(huán)境光遮蔽SSAO
這篇文章主要為大家介紹了Three.js?中屏幕空間環(huán)境光遮蔽SSAO的原理及實(shí)現(xiàn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
利用JS判斷數(shù)據(jù)類型的四種方法
面試的時(shí)候經(jīng)常會(huì)問到JS 中判斷數(shù)據(jù)類型的方法，一般常用的就是typeof了，其他的也想不起來，今天特意在網(wǎng)上查了一下來總結(jié),這篇文章主要介紹了利用JS判斷數(shù)據(jù)類型的四種方法,需要的朋友可以參考下
2021-08-08
JavaScript中代理與反射的用法詳解
JavaScript作為一門靈活而強(qiáng)大的語(yǔ)言,提供了代理（Proxy）與反射（Reflect）這兩個(gè)元編程工具,它們?yōu)殚_發(fā)者提供了更深層次的語(yǔ)言控制和操作,在本篇博客中,我們將深入研究代理與反射的概念、用法,以及如何巧妙地結(jié)合它們來實(shí)現(xiàn)高級(jí)的編程技巧,需要的朋友可以參考下
2023-12-12
ko knockoutjs動(dòng)態(tài)屬性綁定技巧應(yīng)用
ko的動(dòng)態(tài)屬性是指，ViewModel不確定的屬性，而后期卻需要的屬性,本文將詳細(xì)介紹，需要的朋友參考下
2012-11-11
JS實(shí)現(xiàn)水平移動(dòng)與垂直移動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)水平移動(dòng)與垂直移動(dòng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
快速查找數(shù)組中的某個(gè)元素并返回下標(biāo)示例
最近在寫jquery的combobox插件時(shí)遇到效率問題，再加上jquery選擇器的類帥選，導(dǎo)致效率很慢，采用以下方式二，可以輕松解決此問題
2013-09-09
javascript getElementsByClassName實(shí)現(xiàn)代碼
根據(jù)元素clsssName得到元素集合的函數(shù)，需要的朋友可以參考下。
2010-10-10
JavaScript從數(shù)組的indexOf()深入之Object的Property機(jī)制
這篇文章主要介紹了JavaScript從數(shù)組的indexOf()深入——Object的Property機(jī)制的相關(guān)資料,需要的朋友可以參考下
2016-05-05
Javascript拖拽系列文章1之offsetParent屬性
這個(gè)系列文章主要是講述實(shí)現(xiàn)Javascript拖拽功能的基礎(chǔ)知識(shí)，并將在最后給出一個(gè)完整的示例。適合對(duì)拖拽完全不懂的人閱讀
2008-09-09
JavaScript中檢測(cè)數(shù)據(jù)類型的四種方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了四個(gè)JavaScript中檢測(cè)數(shù)據(jù)類型的常用方法，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下
2023-04-04