點選事件的座標計算(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的一眾屬性完全相