js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法
更新時間：2015年03月31日 15:13:09 作者：歐陽不瘋
這篇文章主要介紹了js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法,涉及javascript操作鼠標(biāo)事件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法。分享給大家供大家參考。具體如下：
下面的js代碼演示了onmousemove和onmouseout事件的用法，鼠標(biāo)在指定區(qū)域內(nèi)移動時會動態(tài)顯示鼠標(biāo)坐標(biāo)信息
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e)
{
x=e.clientX;
y=e.clientY;
coor="Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML=coor
}
function clearCoor()
{
document.getElementById("demo").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<div id="coordiv" style="width:199px;height:99px;border:1px solid"
onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<p>Mouse over the rectangle above,
and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- JS獲取鼠標(biāo)坐標(biāo)位置實例分析
- js實現(xiàn)獲取div坐標(biāo)的方法
- javascript獲取文檔坐標(biāo)和視口坐標(biāo)
- javascript實時獲取鼠標(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 onmousemove鼠標(biāo)移動坐標(biāo)接龍DIV效果實例
- js鼠標(biāo)及對象坐標(biāo)控制屬性詳細(xì)解析
- JavaScript獲取對象在頁面中位置坐標(biāo)的方法
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談js中對象的使用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
一個剛完成的layout（拖動流暢，不受iframe影響）...2007-08-08
下面小編就為大家?guī)硪黄猨s獲取css的各種樣式并且設(shè)置他們的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章介紹了js動態(tài)給table添加/刪除tr的方法，有需要的朋友可以參考一下2013-08-08
javascript 用原型繼承來實現(xiàn)對象系統(tǒng)
對象系統(tǒng)中的繼承特性有三種方式:基于類，基于原型，基于元類2010-03-03
這篇文章主要介紹了JavaScript 作用域的相關(guān)資料，文中講解非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單的輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了封裝好的js判斷操作系統(tǒng)與瀏覽器代碼分享,對于我們做系統(tǒng)、瀏覽器兼容非常有幫助，需要的朋友可以參考下2015-01-01
《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 語法
這篇文章主要介紹了《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 語法,需要的朋友可以參考下2015-01-01
本文給大家介紹js如何禁止查看網(wǎng)頁源代碼，并給大家分享了三種查看路徑的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10