干熟妇在线视频午夜剧场一级A级|99成人香视频日本两性激情视频|久久 午夜福利无码精品人妻一区|热久久超碰精品精品少妇一区二区|五月天综合在线国产一区免费视频|亚洲成人中心热re久久99|亚洲国产怡红院丁香五月综合h|玖玖九久久久午夜射精视频

十年專注于品牌網(wǎng)站建設(shè) 十余年專注于網(wǎng)站建設(shè)_小程序開發(fā)_APP開發(fā),低調(diào)、敢創(chuàng)新、有情懷!
南昌百恒網(wǎng)絡(luò)微信公眾號 掃一掃關(guān)注
小程序
tel-icon全國服務(wù)熱線:400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號
掃一掃打開百恒網(wǎng)絡(luò)微信小程序

百恒網(wǎng)絡(luò)

南昌百恒網(wǎng)絡(luò)

圖文結(jié)合介紹客戶區(qū)坐標(biāo)、頁面坐標(biāo)及屏幕坐標(biāo)三者區(qū)別及用法

百恒網(wǎng)絡(luò) 2016-12-21 7800

在實現(xiàn)交互及JS動畫過程中經(jīng)常要對屏幕、頁面、客戶區(qū)、可以視區(qū)進(jìn)行判斷,確定對像當(dāng)前所處理的位置以及下步一的動向,在此南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)前端開發(fā)工程師向大家介紹這三者區(qū)別及用法。
? ? ? ?1.客戶區(qū)坐標(biāo)位置
? ? ? ?鼠標(biāo)事件都是在瀏覽器視口中的特定位置上發(fā)生的。這個位置信息保存在事件對象的 clientX 和 clientY 屬性中。所有瀏覽器都支持這兩個屬性,它們的值表示事件發(fā)生時鼠標(biāo)指針在視口中的水平 和垂直坐標(biāo)。如圖展示了視口中客戶區(qū)坐標(biāo)位置的含義。
? ? ? ?可以使用類似下列代碼取得鼠標(biāo)事件的客戶端坐標(biāo)信息:?

clientX,clientY客戶區(qū)
? ? ? ?var div = document.getElementById("myDiv");
? ? ? ?EventUtil.addHandler(div, "click", function(event){
? ? ? ? ? ? ? event = EventUtil.getEvent(event);
? ? ? ? ? ? ? alert("Client coordinates: " + event.clientX + "," + event.clientY);?
? ? ? ?});
? ? ? ?
這里為一個
元素指定了 onclick 事件處理程序。當(dāng)用戶單擊這個元素時,就會看到事件的 客戶端坐標(biāo)信息。注意,這些值中不包括頁面滾動的距離,因此這個位置并不表示鼠標(biāo)在頁面上的位置。
? ? ? ?2.頁面坐標(biāo)位置
? ? ? ?通過客戶區(qū)坐標(biāo)能夠知道鼠標(biāo)是在視口中什么位置發(fā)生的,而頁面坐標(biāo)通過事件對象的 pageX 和 pageY 屬性,能告訴你事件是在頁面中的什么位置發(fā)生的。換句話說,這兩個屬性表示鼠標(biāo)光標(biāo)在頁面 中的位置,因此坐標(biāo)是從頁面本身而非視口的左邊和頂邊計算的。 以下代碼可以取得鼠標(biāo)事件在頁面中的坐標(biāo):?
? ? ? ? var div = document.getElementById("myDiv");
? ? ? ?EventUtil.addHandler(div, "click", function(event){
? ? ? ? ? ? ? event = EventUtil.getEvent(event);?
? ? ? ? ? ? ? alert("Page coordinates: " + event.pageX + "|" + pageX + "," + event.pageY + "|"+pageY);?
? ? ? ?});

? ? ? ?在頁面沒有滾動的情況下,pageX 和 pageY 的值與 clientX 和 clientY 的值相等。 IE8 及更早版本不支持事件對象上的頁面坐標(biāo),不過使用客戶區(qū)坐標(biāo)和滾動信息可以計算出來。這 時候需要用到 document.body(混雜模式)或document.documentElement(標(biāo)準(zhǔn)模式)中的 scrollLeft 和 scrollTop 屬性。計算過程如下所示:?
? ? ? ? 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){
? ? ? ? ? ? ? ? ? ? ?pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
? ? ? ? ? ? ? }?
? ? ? ? ? ? ? if (pageY === undefined){
? ? ? ? ? ? ? ? ? ? ?pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
? ? ? ? ? ? ? }?
? ? ? ? ? ? ? alert("Page coordinates: " + event.pageX + "|" + pageX + "," + event.pageY + "|"+pageY);?
});
? ? ? ?3.屏幕坐標(biāo)位置
? ? ? ?鼠標(biāo)事件發(fā)生時,不僅會有相對于瀏覽器窗口的位置,還有一個相對于整個電腦屏幕的位置。而通 過 screenX 和 screenY 屬性就可以確定鼠標(biāo)事件發(fā)生時鼠標(biāo)指針相對于整個屏幕的坐標(biāo)信息。圖 13-5 展示了瀏覽器中屏幕坐標(biāo)的含義。?
? ? ? ?可以使用類似下面的代碼取得鼠標(biāo)事件的屏幕坐標(biāo):?
screenX,screenY屏幕坐標(biāo)位置
? ? ? ? var div = document.getElementById("myDiv");
? ? ? ?EventUtil.addHandler(div, "click", function(event){
? ? ? ? ? ? ? event = EventUtil.getEvent(event);
? ? ? ? ? ? ? alert("Screen coordinates: " + event.screenX + "," + event.screenY);?
? ? ? ?});
? ? ? ?與前一個例子類似,這里也是為
元素指定了一個 onclick 事件處理程序。當(dāng)這個元素被單 擊時,就會顯示出事件的屏幕坐標(biāo)信息了。?
實例完整代碼如下:



? ? ? ?Screen Coordinates Example
? ? ? ?


? ? ? ?
Click me

? ? ? ?


? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://m.myforexfactory.net/如轉(zhuǎn)載請注明出處!
400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號
掃一掃打開百恒網(wǎng)絡(luò)小程序

歡迎您的光顧,我們將竭誠為您服務(wù)×

天祝| 恩施市| 三亚市| 视频| 玉环县| 太仓市| 岳阳市| 台南县| 玉田县| 乌鲁木齐县| 武冈市| 通河县| 深泽县| 广南县| 东平县| 农安县| 涿鹿县| 额尔古纳市| 黄骅市| 顺昌县| 莱阳市| 上饶县| 江川县| 辽中县| 谷城县| 三明市| 丰原市| 外汇| 乳源| 十堰市| 合江县| 新龙县| 密山市| 大余县| 株洲市| 二手房| 满洲里市| 宣汉县| 灵武市| 寿阳县| 卓资县|