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

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

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

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

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

      在實(shí)現(xiàn)交互及JS動(dòng)畫過程中經(jīng)常要對(duì)屏幕、頁(yè)面、客戶區(qū)、可以視區(qū)進(jìn)行判斷,確定對(duì)像當(dāng)前所處理的位置以及下步一的動(dòng)向,在此南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)前端開發(fā)工程師向大家介紹這三者區(qū)別及用法。
      ? ? ? ?1.客戶區(qū)坐標(biāo)位置
      ? ? ? ?鼠標(biāo)事件都是在瀏覽器視口中的特定位置上發(fā)生的。這個(gè)位置信息保存在事件對(duì)象的 clientX 和 clientY 屬性中。所有瀏覽器都支持這兩個(gè)屬性,它們的值表示事件發(fā)生時(shí)鼠標(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);?
      ? ? ? ?});
      ? ? ? ?
      這里為一個(gè)
      元素指定了 onclick 事件處理程序。當(dāng)用戶單擊這個(gè)元素時(shí),就會(huì)看到事件的 客戶端坐標(biāo)信息。注意,這些值中不包括頁(yè)面滾動(dòng)的距離,因此這個(gè)位置并不表示鼠標(biāo)在頁(yè)面上的位置。
      ? ? ? ?2.頁(yè)面坐標(biāo)位置
      ? ? ? ?通過客戶區(qū)坐標(biāo)能夠知道鼠標(biāo)是在視口中什么位置發(fā)生的,而頁(yè)面坐標(biāo)通過事件對(duì)象的 pageX 和 pageY 屬性,能告訴你事件是在頁(yè)面中的什么位置發(fā)生的。換句話說,這兩個(gè)屬性表示鼠標(biāo)光標(biāo)在頁(yè)面 中的位置,因此坐標(biāo)是從頁(yè)面本身而非視口的左邊和頂邊計(jì)算的。 以下代碼可以取得鼠標(biāo)事件在頁(yè)面中的坐標(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);?
      ? ? ? ?});

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



      ? ? ? ?Screen Coordinates Example
      ? ? ? ?


      ? ? ? ?
      Click me

      ? ? ? ?


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

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

      亚洲日韩国产AV无码无码精品| 国产精品55夜色66夜色| 日韩在线一区视频| 精品无码一区二区三区爱欲九九 | 中文字幕精品一区二区| 久久精品午夜一区二区福利| 国产精品三级国产电影| a级亚洲片精品久久久久久久| 国产91精品一区二区麻豆亚洲| 日韩精品一区二区三区老鸭窝| 国产精品亚洲а∨无码播放麻豆| 精品无码人妻一区二区三区18| 国产国产精品人在线视| 国产线视频精品免费观看视频| 国产精品va在线观看无码| 无码8090精品久久一区| 精品少妇人妻AV一区二区| 国产精品亚洲午夜一区二区三区 | 国产精品白浆在线观看无码专区| 99精品视频在线免费观看 | 无码精品不卡一区二区三区| 国产精品天干天干综合网| 99re热这里只有精品视频中文字幕| 国产午夜福利久久精品| 国产精品视频久久久久| 国内精品久久久久影院蜜芽| 91精品国产高清久久久久久国产嫩草| 中文精品久久久久人妻| 国产精品哟女在线观看| 日韩成人毛片高清视频免费看| 国产精品高清视亚洲精品| 亚洲精品乱码久久久久久下载| 国内精品一线二线三线黄| 国产午夜精品理论片免费观看| 精品无码人妻久久久久久| 精品一区二区三区免费视频| 国产一区二区三区精品视频| 亚洲国产另类久久久精品黑人| 精品理论片一区二区三区| 日韩在线观看一区二区三区| 精品在线免费视频|