1. 程式人生 > >點選事件的座標計算(client || offset) +(X || Width || Left) 各種排列組合別繞暈

點選事件的座標計算(client || offset) +(X || Width || Left) 各種排列組合別繞暈

結論:

1,X,Y的都是屬於點選位置的,width、height、left、top都是屬於DOM的。

2,涉及的所有位置只與document或DOM內部有關,與DOM如何定位,周圍有沒有其他佔位HTML元素,DOM有沒有父級元素等統統無關。

說明:每次點選都是點選綠色方塊的中心點,綠色方塊的CSS程式碼如下:

PC端:

  屬於點選位置:

    1:clientX && clientY是點選位置到document左上角(不是body)的距離。

    

 

    2.offsetX && offsetY是點選位置距離當前被點選DOM元素(即$event.target)的左上角,但不包括border和margin的距離。

    

 

    3.pageX && pageY。忘掉它吧,pageX = clientX + scrollLeft , pageY = clientY + scrollTop。這也就是說,在沒有滾動的時候它與clientX、clientY大小相等。

 

 

  屬於被點選DOM:

    1.clientWidth && clientHeight是DOM包括padding但不包括margin和border的寬高。

    

 

     2.offsetWidth && offsetHeight。比clientWidth && clientHeight大一點點,多了條border。

    

 

    3.clientLeft && clientTop,就是border-left和border-top。

    

 

    4.offsetLeft && offsetTop。是DOM的border的左上頂點到document的左上頂點的距離。

    

 

 

移動端:

  屬於點選位置:

    1,touches[0].clientX && touches[0].clientY與PC端的clientX、clientY同義。

    

 

    2.touches[0].pageX && touches[0].pageY與pageX、pageY同義。

   3.移動端沒有offsetX和offsetY。

  屬於被點選DOM:

    與PC端DOM的一眾屬性完全相