快捷導(dǎo)航

Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享

更新時(shí)間：2015年05月25日 12:10:18 投稿：junjie

這篇文章主要介紹了Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享,本文直接給出實(shí)現(xiàn)的代碼,需要的朋友可以參考下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title>jquery 獲取鼠標(biāo)指針的坐標(biāo)</title>
<script>
//普通js函數(shù)
function test(event) {
 event = event || window.event;
 var x = event.offsetX || event.layerX;
 var y = event.offsetY || event.layerY;
 alert("x="+x+"; y="+y);
 }
//jquery函數(shù)
$(function(){
 $("#t").mouseover(
 function(event){
  event = event || window.event; 
  var x = event.offsetX || event.originalEvent.layerX;
  var y = event.offsetY || event.originalEvent.layerY;
  alert("x:"+x+"; y:"+y);
 }
 );
 });
</script>

</head>

<body>
<div id="t" style="float:left;background-color: green;width: 300px;height: 60px;">測(cè)試鼠標(biāo)位置（jquery函數(shù)處理）</div>
<div id="s" onmouseover="test(event)" style="float:left;background-color: red;width: 300px;height: 60px;margin-left:10px;">測(cè)試鼠標(biāo)位置（普通js函數(shù)處理）</div>

</body>
</html>

您可能感興趣的文章:

相關(guān)文章

js技巧之十幾行的代碼實(shí)現(xiàn)vue.watch代碼
相信很多的用vue的人都知道vue雙向綁定的原理建立在，給屬性綁定了getter和setter，在屬性被改變的同時(shí)觸發(fā)視圖的再渲染。而本期也是借助這兩個(gè)內(nèi)置方法實(shí)現(xiàn)vue內(nèi)的watch
2018-06-06
Sortable.js功能強(qiáng)大的JavaScript 拖拽庫(kù)示例詳解
SortableJS 是一個(gè)強(qiáng)大、靈活且易于使用的 JavaScript 庫(kù),適用于各種類型的拖放排序需求,這篇文章主要介紹了Sortable.js功能強(qiáng)大的JavaScript 拖拽庫(kù)示例詳解,需要的朋友可以參考下
2025-01-01
使用jscript實(shí)現(xiàn)二進(jìn)制讀寫腳本代碼
Reading And Writing Binary Files Using JScript正如我剛才推什么我能做的JScript中，我想出了對(duì)問(wèn)題的二進(jìn)制文件。以下級(jí)的解決，這為小到中等大小的文件。我的部分包括這個(gè)職位在這里，因?yàn)槲壹磳⒏吨T表決，在一個(gè)職位約發(fā)送帶有附件的電郵通過(guò)JScript和它會(huì)使用這個(gè)二進(jìn)制文件碼來(lái)讀取，在二進(jìn)制附件檔案。
2008-06-06
Js實(shí)現(xiàn)粘貼上傳圖片的原理及示例
這篇文章主要介紹了Js實(shí)現(xiàn)粘貼上傳圖片的原理及示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-12-12
Javascript模塊導(dǎo)入導(dǎo)出詳解
這篇文章主要介紹了Javascript模塊導(dǎo)入導(dǎo)出詳解的相關(guān)資料,需要的朋友可以參考下
2022-12-12
JavaScript中Function與Object的關(guān)系
本文主要介紹了JavaScript中Function與Object的關(guān)系，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
JavaScript構(gòu)造函數(shù)舉例詳解
Javascript構(gòu)造函數(shù)是非常強(qiáng)大的,它可能也是Javascript能被充分利用的特點(diǎn)之一,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),這篇文章主要給大家介紹了關(guān)于JavaScript構(gòu)造函數(shù)的相關(guān)資料,需要的朋友可以參考下
2023-04-04
javascript彈出一個(gè)層并增加一個(gè)覆蓋層
彈出一個(gè)層的js代碼，比較不錯(cuò)
2008-10-10
JavaScript實(shí)現(xiàn)簡(jiǎn)單版的留言發(fā)布與刪除
這篇文章主要介紹了如何通過(guò)JavaScript實(shí)現(xiàn)簡(jiǎn)單的留言板功能：留言的發(fā)布與刪除。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下
2022-03-03
js判斷主流瀏覽器類型和版本號(hào)的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇js判斷主流瀏覽器類型和版本號(hào)的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05