十年專注于品牌網站建設 十余年專注于網站建設_小程序開發_APP開發,低調、敢創新、有情懷!
      南昌百恒網絡微信公眾號 掃一掃關注
      小程序
      tel-icon全國服務熱線:400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡微信小程序

      百恒網絡

      南昌百恒網絡

      圖文結合介紹客戶區坐標、頁面坐標及屏幕坐標三者區別及用法

      百恒網絡 2016-12-21 7805

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

      clientX,clientY客戶區
      ? ? ? ?var div = document.getElementById("myDiv");
      ? ? ? ?EventUtil.addHandler(div, "click", function(event){
      ? ? ? ? ? ? ? event = EventUtil.getEvent(event);
      ? ? ? ? ? ? ? alert("Client coordinates: " + event.clientX + "," + event.clientY);?
      ? ? ? ?});
      ? ? ? ?
      這里為一個
      元素指定了 onclick 事件處理程序。當用戶單擊這個元素時,就會看到事件的 客戶端坐標信息。注意,這些值中不包括頁面滾動的距離,因此這個位置并不表示鼠標在頁面上的位置。
      ? ? ? ?2.頁面坐標位置
      ? ? ? ?通過客戶區坐標能夠知道鼠標是在視口中什么位置發生的,而頁面坐標通過事件對象的 pageX 和 pageY 屬性,能告訴你事件是在頁面中的什么位置發生的。換句話說,這兩個屬性表示鼠標光標在頁面 中的位置,因此坐標是從頁面本身而非視口的左邊和頂邊計算的。 以下代碼可以取得鼠標事件在頁面中的坐標:?
      ? ? ? ? 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 及更早版本不支持事件對象上的頁面坐標,不過使用客戶區坐標和滾動信息可以計算出來。這 時候需要用到 document.body(混雜模式)或document.documentElement(標準模式)中的 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.屏幕坐標位置
      ? ? ? ?鼠標事件發生時,不僅會有相對于瀏覽器窗口的位置,還有一個相對于整個電腦屏幕的位置。而通 過 screenX 和 screenY 屬性就可以確定鼠標事件發生時鼠標指針相對于整個屏幕的坐標信息。圖 13-5 展示了瀏覽器中屏幕坐標的含義。?
      ? ? ? ?可以使用類似下面的代碼取得鼠標事件的屏幕坐標:?
      screenX,screenY屏幕坐標位置
      ? ? ? ? var div = document.getElementById("myDiv");
      ? ? ? ?EventUtil.addHandler(div, "click", function(event){
      ? ? ? ? ? ? ? event = EventUtil.getEvent(event);
      ? ? ? ? ? ? ? alert("Screen coordinates: " + event.screenX + "," + event.screenY);?
      ? ? ? ?});
      ? ? ? ?與前一個例子類似,這里也是為
      元素指定了一個 onclick 事件處理程序。當這個元素被單 擊時,就會顯示出事件的屏幕坐標信息了。?
      實例完整代碼如下:



      ? ? ? ?Screen Coordinates Example
      ? ? ? ?


      ? ? ? ?
      Click me

      ? ? ? ?


      ? 本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://www.dgscpc.com/如轉載請注明出處!
      400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡小程序

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

      久久久久人妻精品一区| 99re久久精品国产首页2020| 亚洲AV无码成人精品区日韩| 久久精品亚洲一区二区三区浴池| 精品久久久久久久| 久久久久一级精品亚洲国产成人综合AV区 | 精品国产福利在线观看一区| 亚洲精品视频免费在线观看| 久久亚洲精品中文字幕| 久久久久久国产精品三级 | 国产va免费精品观看精品 | 亚洲精品视频久久久| 日韩精品亚洲专区在线影视| 国产日韩一区二区三免费高清| 国产伦精品一区二区三区免费下载| 尤物国产精品福利三区| 精品久久久久国产| 女同久久另类99精品国产| 日韩精品免费一区二区三区| 午夜人屠h精品全集| 精品国产自在现线久久| 国内精品在线播放| 午夜精品福利在线观看| 狠狠入ady亚洲精品| 精品国产_亚洲人成在线| 精品欧洲男同同志videos| 精品国产香蕉伊思人在线又爽又黄| 天堂精品高清1区2区3区| 国产高清在线精品免费软件| 日本精品一区二区在线播放| 日韩精品一区二区三区在线观看l| 好吊妞这里有精品| 国产精品酒店视频| vvvv99日韩精品亚洲| 久久亚洲日韩精品一区二区三区| 最新日韩精品中文字幕 | 在线观看精品视频看看播放| 7m精品福利视频导航| 2021国内精品久久久久精免费 | 在线观看日韩一区| 午夜精品久久影院蜜桃|