JavaScript --- 取得鼠標事件的坐標

說明:

  • clientX和clientY屬性:事件發生時,鼠標指針在視口中的水平和垂直坐標。
  • pageX和pageY屬性:鼠標光標在頁面中的位置。
  • screenX和screenY屬性:鼠標事件發生時,鼠標指針相對于整個屏幕的坐標信息。
  • IE8及更早的版本不支持事件對象上的頁面坐標(pageX,pageY)。
  • EventUtil參考上一篇。
// 取得鼠標事件在頁面中的坐標
var div =document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event) {event = EventUtil.getEvent(event);var pageX = event.pageX,pageY = event.pageY;if (pageX === undefined) {    // 兼容IE8及以下pageX = event.clientX + (document.body.scrollLeft || document.document.scrollTop);}if (pageY === undefined) {pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);}alert("Page coordinates: " + pageX + "," + pageY);
});
//取得鼠標事件的屏幕坐標
var div = document.getElementById("maDiv");
EventUtil.addHandler(div, "click", function(event){event = EventUtil.getEvent(event);alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

摘自《JavaScript高級程序設計》(第3版) P371

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/251604.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/251604.shtml
英文地址,請注明出處:http://en.pswp.cn/news/251604.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JavaScript語義基礎

變量(Variables) Variables是你存儲數據的容器。聲明一個變量需要使用關鍵字var,然后輸入變量的名稱。 1 var myvar; 定義一個變量后,可以賦予變量一個值: 1 myvar "mxp"; 可以將上述操作寫在一行&#x…

spring面試專題一點通,再也不用擔心面試不會回答了

前言文章內容有點小長,希望你能耐心閱讀,更多Java面試題以及學習資料獲取方式:加Qun:1017-599-436免費獲取。還有更多包括電子書,PDF文檔以及視頻精講可以分享給大家,內容覆蓋很廣,分布式緩存、RPC 調用、Z…

bzoj4033 [HAOI2015]樹上染色

題目:https://www.lydsy.com/JudgeOnline/problem.php?id4033 重要的思路:與其考慮每一個點對的貢獻,不如考慮每條邊的貢獻(被經過了幾次)! 樹形dp。 總共的黑點和白點的個數都是已知的,所以知…

JavaScript --- 表單focus,blur,change事件的實現

假設有一個文本框,我們只允許用戶輸入數值。為此,我們希望: 1.利用focus事件修改文本框內容, 2.利用blur事件回復文本框的內容, 3.利用change事件在用戶輸入了非數值字符時再次修改背景顏色。 var EventUtil {addHandler: function(element…

mysql日期格式轉化

select DATE_FORMAT( 20170701, %Y-%m-%d);先挖坑轉載于:https://www.cnblogs.com/tuhooo/p/7766221.html

Solr管理頁面 上

DashBoard(儀表盤)Logging(日志)Core Admin(Core管理)在Solr中,每一個Core,代表一個索引庫,里面包含索引數據及其配置信息。Solr中可以擁有多個Core,也就同時…

GRPC協議的相關原理

GRPC的Client與Server,均通過Netty Channel作為數據通信,序列化、反序列化則使用Protobuf,每個請求都將被封裝成HTTP2的Stream,在整個生命周期中,客戶端Channel應該保持長連接,而不是每次調用重新創建Chann…

Echarts --- 各個省份的坐標

純手打…效果如下 1.新疆: [86.61 , 40.79] 2.西藏:[89.13 , 30.66] 3.黑龍江:[128.34 , 47.05] 4.吉林:[126.32 , 43.38] 5.遼寧:[123.42 , 41.29] 6.內蒙古:[112.17 , 42.81] 7.北京:[116.40 , 40.40 ] 8.寧夏:[106.27 , 36.76] 9.山西:[111.95,37.65] 10.河北:[115.21 , 38.…

xxx征集系統項目目標文檔

問題 每四人一組,討論結束后,每人根據課堂討論結果提交一份系統利益相關者案例。撰寫撰寫項目目標文檔(目標,好處,度量標準。) 項目目標文檔 目標: (1)需求填報 &#xf…

高并發大流量專題---10、MySQL數據庫層的優化

高并發大流量專題---10、MySQL數據庫層的優化 一、總結 一句話總結: mysql先考慮做分布式緩存,過了緩存后就做mysql數據庫層面的優化 1、mysql數據庫層的優化的前面一層是什么? 數據庫緩存:突破了數據庫緩存就需要做mysql數據庫層…

【彩彩只能變身隊】后端工作總結

2018.06.09 早上8點到晚上10點 沖刺前后端交互(vueexpressmysql) 8&#xff1a;00-12&#xff1a;00 &#xff1a; 前端把請求寫好&#xff1a; <template> <div class"LoginForm"> <el-form ref"form" label-width"80px"…

web安全

web安全 DOS命令 web攻防必備課筆記 慕課xss學習 阮一峰&#xff1a;MVC、MVP和MVVM的圖示轉載于:https://www.cnblogs.com/hanxuming/p/7774092.html

JavaScript --- 渲染數據量大的數組

很多時候&#xff0c;需要在頁面上展示從后臺來的大量數據,如果一次性渲染&#xff0c;會影響用戶的體驗。(而且瀏覽器中的JS嚴格限制了資源) /* *使用分組的思想來渲染大量的數組 *parmas array 要處理的數組 *params process 對數組中每一個item進行的操作 *parmas context …

Jquery操作select小結

每次操作select都要查資料&#xff0c;干脆總結一下。 為select設置placeholder <select class"form-control selOP" placeholder"Pick Orchestration Plan"><option value"" disabled selected styledisplay:none;>Pick Orchestrat…

第六講:PrintClient工具的使用

一些簡單命令&#xff1a; cp -rf 源目錄 目的目錄 chmod -R 777 文件名 motelist 查看節點路徑 make telosb 編譯代碼 make telosb reinstall 下載但不編譯 make telosb install 編譯并且下載 make telosb install, 2 bsl,/dev/ttyUSB0 下載指定路徑 java net.tinyos.tools.Li…

SQL Server

查看數據庫服務器名稱&#xff1a;tracert 192.168.10.01 轉載于:https://www.cnblogs.com/hongwei2085/p/9174760.html

css --- 選擇器

標簽選擇器 // 標簽選擇器是最簡單的選擇器, 它的命名只要和對應的HTML標簽相同即可 h1 {font-size: 30px;color: #333; }類選擇器 // 類選擇器也稱為class選擇器,它的語法非常簡單,在class名稱前面加上一個"."符號 <div class"red content"></…

C++標準輸入流、輸出流以及文件流

1、流的控制 iomanip 在使用格式化I/O時應包含此頭文件。 stdiostream 用于混合使用C和C 的I/O機制時&#xff0c;例如想將C程序轉變為C程序 2、類繼承關系 ios是抽象基類&#xff0c;由它派生出istream類和ostream類&#xff0c; iostream類支持輸入輸出操作&…

Hadoop學習筆記—8.Combiner與自定義Combiner

一、Combiner的出現背景 1.1 回顧Map階段五大步驟 在第四篇博文《初識MapReduce》中&#xff0c;我們認識了MapReduce的八大步湊&#xff0c;其中在Map階段總共五個步驟&#xff0c;如下圖所示&#xff1a; 其中&#xff0c;step1.5是一個可選步驟&#xff0c;它就是我們今天需…

6-12mysql庫的操作

1&#xff0c;mysql庫的各種分類: nformation_schema&#xff1a; 虛擬庫&#xff0c;不占用磁盤空間&#xff0c;存儲的是數據庫啟動后的一些參數&#xff0c;如用戶表信息、列信息、權限信息、字符信息等.  performance_schema&#xff1a; MySQL 5.5開始新增一個數據庫&am…