快捷導(dǎo)航

js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法

更新時(shí)間：2015年03月31日 15:13:09 作者：歐陽不瘋

這篇文章主要介紹了js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法,涉及javascript操作鼠標(biāo)事件的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法。分享給大家供大家參考。具體如下：

下面的js代碼演示了onmousemove和onmouseout事件的用法，鼠標(biāo)在指定區(qū)域內(nèi)移動(dòng)時(shí)會(huì)動(dòng)態(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è)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

淺談js中對象的使用
下面小編就為大家?guī)硪黄獪\談js中對象的使用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
一個(gè)剛完成的layout（拖動(dòng)流暢，不受iframe影響）
一個(gè)剛完成的layout（拖動(dòng)流暢，不受iframe影響）...
2007-08-08
js獲取css的各種樣式并且設(shè)置他們的方法
下面小編就為大家?guī)硪黄猨s獲取css的各種樣式并且設(shè)置他們的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
js動(dòng)態(tài)給table添加/刪除tr的方法
這篇文章介紹了js動(dòng)態(tài)給table添加/刪除tr的方法，有需要的朋友可以參考一下
2013-08-08
javascript 用原型繼承來實(shí)現(xiàn)對象系統(tǒng)
對象系統(tǒng)中的繼承特性有三種方式:基于類，基于原型，基于元類
2010-03-03
詳解JavaScript 作用域
這篇文章主要介紹了JavaScript 作用域的相關(guān)資料，文中講解非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
js實(shí)現(xiàn)簡單的輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單的輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
封裝好的js判斷操作系統(tǒng)與瀏覽器代碼分享
這篇文章主要介紹了封裝好的js判斷操作系統(tǒng)與瀏覽器代碼分享,對于我們做系統(tǒng)、瀏覽器兼容非常有幫助，需要的朋友可以參考下
2015-01-01
《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 語法
這篇文章主要介紹了《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 語法,需要的朋友可以參考下
2015-01-01
JS禁止查看網(wǎng)頁源代碼的實(shí)現(xiàn)方法
本文給大家介紹js如何禁止查看網(wǎng)頁源代碼，并給大家分享了三種查看路徑的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-10-10