国产成人v爽在线免播放观看,日韩欧美色,久久99国产精品久久99软件,亚洲综合色网站,国产欧美日韩中文久久,色99在线,亚洲伦理一区二区

學(xué)習(xí)啦>學(xué)習(xí)電腦>電腦硬件知識>鍵盤鼠標>

鼠標事件屬性詳解

時間: 沈迪豪908 分享

  學(xué)前端的小伙伴們你們對數(shù)表事件有多少了解?跟著學(xué)習(xí)啦小編一起學(xué)習(xí)一下鼠標事件吧

  鼠標事件的screenY,pageY,clientY,layerY,offsetY屬性詳解

  screenY

  鼠標相對于顯示器屏幕左上角的偏移

  pageY

  鼠標相對于頁面左上角的偏移 (其值不會受滾動條的影響)

  IE9之下并不支持這個屬性

  但是可以寫點代碼計算出來。 jQuery中的實現(xiàn):

  代碼如下:

  // Calculate pageX/Y if missing and clientX/Y available

  if ( event.pageX == null && original.clientX != null ) {

  eventDoc = event.target.ownerDocument || document;

  doc = eventDoc.documentElement;

  body = eventDoc.body;

  event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft||body&&body.clientLeft || 0 );

  event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );

  }

  簡單點實現(xiàn)就是。

  鼠標相對于瀏覽器視口的偏移加上文檔的滾動條隱藏的高度減去文檔的clientTop.

  代碼如下:

  var pageY = event.clientY +document.documentElement. scrollTop-document.documentElement.clientTop

  為何要減去document.documentElement.clientTop

  這是IE8之下瀏覽器特有的文檔的偏移,即使設(shè)置html,body的padding和margin為0也不會影響其值。

  在iE7下測試,得到

  代碼如下:

  document.documentElement.clientTop --> 2px document.documentElement.clientLeft --> 2px

  document.bocy.clientTop --> 0px document.body.clientLeft --> 0px

  clientY

  鼠標相對于瀏覽器視口左上角的偏移

  注意clientY和pageY的區(qū)別,clientY在頁面無滾動條的情況下值等同于pageY

  ----------------------------------分割-----------------------------------------------

  layerY

  如果元素的position樣式不是默認的static,我們說這個元素具有定位屬性。

  在當前觸發(fā)鼠標事件的元素和它的祖先元素中找到最近的具有定位屬性的元素,計算鼠標與其的偏移值,以找到元素的border的左上角的外交點作為相對點。如果找不到具有定位屬性的元素,那么就相對于當前頁面計算偏移,此時等同于pageY。

  IE9之下并不支持這個屬性,但是可以用其特有的offsetY替換

  offsetY

  IE專有的屬性

  offsetY和layerY的不同在于,前者的在計算偏移值時,相對于元素的border左上角的內(nèi)交點,因此當鼠標位于元素的border上時,偏移值是一個負值。 另外offsetY并不在乎觸發(fā)事件的元素是否有定位屬性,它總是相對于觸發(fā)事件的元素來計算偏移值。

  鑒于layerY和offsetY的不同,要兼容的使用二者要注意

  1.觸發(fā)事件的元素一定要設(shè)置定位屬性。

  2.在元素具有上邊框border-top的情況下, layerY比offsetY的值多一個border-top的寬度值。

  代碼如下:

  //這里的element.borderTopWidth必須是實際計算出的元素的上邊框?qū)挾取?/p>

  var borderTopWidth = window.getComputedStyle ? window.getComputedStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth;

  var offsetY = event.offsetY||(event.layerY + borderTopWidth);

  通過layerY和offsetY屬性,可以很方便的計算鼠標相對于綁定鼠標事件元素的偏移,這在某些時候非常有用。

  這里詳細說了鼠標豎直方向的偏移屬性,水平方向的偏移類似,不再討論。

鼠標事件相關(guān)文章:

1.如何設(shè)置鼠標事件

2.鍵精靈制作鼠標事件

3.flash鼠標事件

4.怎么實現(xiàn)單擊變雙擊

5.鼠標是誰發(fā)明的 鼠標知識解析大全

1948850