Mouse events and distance attributes

js There are a lot of "distance", in order not to confuse summarize here some of the distance

This article includes 元素属性related distances and 鼠标事件distances, ado, enter the text

First add the test environment are as follows:

Chrome Dev 54.0.2840.71
Firefox 49.0
Opera 41.0
Safari 10.1
IE 11。

The first four runs on macOS Sierra 10.12, IE11 running in a virtual machine installed on the windows10 1607

Various elements attribute "distance"

Element attributes from the following six pairs:

scrollLeft: Sets or retrieves the objects visible in the window left and a distance between the leftmost content
scrollTop: distance between the object located in the top of the topmost visible in the window contents set or get

offsetHeight: highly visible area of the subject is obtained, including the border
offsetWidth: the width of the viewable area of the subject is obtained, including the border

clientHeight: obtaining a height in the frame part of the object
clientWidth: obtaining a width of the bezel portion within the object

offsetLeft: Get the object relative to the layout or left position is calculated by the specified coordinate parent offsetParent property
offsetTop: calculating the coordinates of the acquisition target or relative to the layout specified by the attribute of the parent tip position offsetTop

clientTop: Get the width of the top border of the object
clientLeft: Get the width of the left border of the object

scrollWidth: Get Object rolling width
scrollHeight: get rolling height of the object.

OffsetParent above mentioned properties, in fact, who is currently div relative positioning, this property is who. Depending on the position value, the following two cases

• When parents are not relative elemental properties, regardless of position of the current element is absolute, relative, fixed or fixed, offsetParent all body elements
• When parents have a relative element attributes, regardless of position of the current element is absolute, relative, fixed or fixed, offsetParent recent parent element has a relative attributes

You could not tell? See the figure

This can clearly see the inside front four pairs above, and the relationship between them.

About jQuery elements from the property, the article finally put together the relationship between them and DOM properties.

The first is worth emphasizing that, box-sizing property in the example above is the default div content-box, it's offsetHeight, clientHeight, clientWidth and offsetWidth the following relationship:

clientHeight = height + paddingTopWidth + paddingBottomWidth;
clientWidth = width + paddingLeftWidth + paddingRightWidth;

offsetHeight = clientHeight + borderTopWidth + borderBottomWidth;
offsetWidth = clientWidth + borderLeftWidth + borderRightWidth;

If the box-sizing property is border-box, then their relationship would be as follows (ie6 ie7 default is this):

offsetHeight = height;
offsetWidth = width;

clientHeight = height - borderTopWidth - borderBottomWidth;
clientWidth = width - borderLeftWidth - borderRightWidth;

The second is worth emphasizing that, in this case, because of its parent element is not set position: relative, so this figure div use position: absolute; relative positioning of the document, if a position has given him added: relative attributes of the parent div , and then offsetLeft offsetTop following figure is this:

But no matter how it is positioned, even if it is position: relative or fixed, it evaluates the relationship does not change, remains:

offsetLeft = left + marginLeft;
offsetTop = top + marginTop;

Talk so much, and then scrollWidth scrollHeight it? scrollWidth and scrollHeight not consistent in different browsers inside, as shown below (from left to right is Chrome, Firefox, Opera, Safari, IE11)

In fact, careful study of the different inside, you will find in offsetLeft different browsers the div, offsetTop these two values ​​of the properties are not identical. When the content inside the div overflow IE only retains all the padding values, chrome, opera and safari ignores the value of them as padding-right 0, Firefox will also ignore padding-right, and padding-bottom, as in FIG.

在各个浏览器中，对于滚动条本身的渲染也不一样。它们会在计算scrollWidth和scrollHeight时排除各自的滚动条宽度。除了上述的不同，实际发现每个浏览器中scrollLeft和scrollTop的最大值也不一样，甚至差距极大，由于scrollLeft和scrollTop随滚动事件发生而输出，博主就上述例子的最大值记录如下：

maximum value	chrome	Firefox	opera	safari	IE11
scrollLeft	330	160	827	330	217
scrollTop	230	210	485	230	330

实际上就是由于这些元素属性在不同浏览器中的差异导致scrollWidth和scrollHeight的不同，具体使用应格外注意。不过博主看过一些资料表示这两个属性和offsetParent有关，通过实际编程发现它们和offsetParent无关，这里不展开描述了，因为低版本浏览器，尤其ie7 ie6的实现方式可能会比较奇葩。

鼠标事件中的各种“距离”

鼠标事件很多，不过每个事件中关于距离的属性含义是一样的，这里用mousemove来讲解，具体的内容会在不久之后写到了js事件部分讲解。
鼠标实现对于现在的浏览器来说，实现都是一样的了，下面例子都在Chorme中实现。

鼠标事件有以下6对：

event.clientX：相对浏览器左上角的水平坐标
event.clientY：相对浏览器左上角的垂直坐标

event.offsetX：相对于事件源(event.target||event.srcElement)左上角水平偏移
event.offsetY：相对于事件源(event.target||event.srcElement)左上角垂直偏移

event.pageX：相对于document左上角的水平坐标
event.pageY：相对于document左上角的垂直坐标

event.layerX：相对于offsetParent左上角的水平偏移
event.layerY：相对于offsetParent左上角的水平偏移

event.movementX：相对于前一次事件中screenX的偏移
event.movementY：相对于前一次事件中screenY的偏移

event.screenX：相对于屏幕左上角的水平坐标
event.screenY：相对于屏幕左上角的垂直坐标

x：和pageX一样，用于兼容IE8及以前浏览器
y：和pageY一样，用于兼容IE8及以前浏览器

总之，还是先看图

*这个图中，黑色实线边框表示浏览器可视区域部分，外层蓝色虚线框表示整个DOM部分,整个图为电脑屏幕

图里面怎么没有movementX和movementY?因为这个事件的值和上一个事件有关，关系如下：

currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
currentEvent.movementY = currentEvent.screenY - previousEvent.screenY

值得注意的时offsetX和offsetY，他表示鼠标到事件源padding左上角的的偏移，这里mousemove事件注册在window上，所以位置如图所示。

当浏览器的水平滚动条滑动以后，pageX和clientX就不同了。同理，当浏览器的垂直滚动条滑动以后，pageY和clientY就不同了,但它们始终存在以下关系：

event.pageX = event.clientX + body.scrollLeft;
event.pageY = event.clientY + body.scrollTop;

鼠标事件中的距离比元素中的简单一些，具体的使用放在之后写的事件部分。

jQuery中元素距离属性

var $div = $("#div");

$div.width(); //元素宽度，不包括padding和border
$div.height(); //元素高度，不包括padding和border

$div.innerWidth(); //元素内宽度，包括padding，不包括border
$div.innerHeight(); //元素内高度，包括padding，不包括border

$div.outterWidth(); //元素可见宽度，包括padding和border
$div.outterHeight(); //元素可见高度，包括padding和border

$div.outterWidth(true); //元素全部宽度，包括padding、border和margin
$div.outterHeight(true); //元素全部高度，包括padding、border和margin