Introduction of mouse events and distance attributes in JS

This article brings to you the content is about JS mouse events and distance properties of the introduction, there is a certain reference value, there is a need for friends to refer to, I hope you have some help.

JS has a lot of "distance", in order not to confuse here to summarize some of the distance

This article includes 元素属性 related distances and 鼠标事件 distances in which nonsense is not much to say, into the body

To add, the test environment for this article is 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, and IE11 runs on a virtual machine powered by Windows10 1607

Various "distances" in element properties

The distance in the element attribute is the following 6 pairs:

ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost side of the visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window

Offsetheight: Gets the height of the viewable area of the object, including the border
Offsetwidth: Gets the width of the viewable area of the object, including the border

ClientHeight: Gets the height of the inner part of the object border
ClientWidth: Gets the width of the inner part of the object border

Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the Offsetparent property
OffsetTop: Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property

ClientTop: Gets the top border width of the object
ClientLeft: Gets the left border width of the object

ScrollWidth: Gets the scrolling width of the object
ScrollHeight: Gets the scroll height of the object.

The offsetparent attribute is mentioned above, in fact, the current p relative who locates, this attribute is who. Depending on the position value, there are 2 different cases

• When the parent element has no relative attribute, the position of the current element is either absolute,relative,fixed or fixed,offsetparent is the BODY element

• The parent element has the relative attribute, regardless of whether the current element's position is absolute,relative,fixed or fixed,offsetparent is the closest parental element with a relative attribute

You don't know the point? See

This can be clearly seen above the top 4 pairs, and their relationship.

On the element distance attribute of jquery, the article finally collates the relationship between them and Dom attributes.

The first one worth emphasizing is that the Box-sizing property of p In this example above is the default Content-box, and its offsetheight,clientheight,clientwidth and offsetwidth have 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 will be as follows (IE6 IE7 by default):

offsetheight = height;
offsetwidth = width;

ClientHeight = Height-bordertopwidth-borderbottomwidth;
ClientWidth = Width-borderleftwidth-borderrightwidth;

The second noteworthy is that in this example, because its parent element is not set position:relative, this p in the figure uses position:absolute; relative to the document location, if you add a position to him: Relative the parent p of the property, then Offsetleft and offsettop are like this:

However, no matter how it is positioned, even if it is position:relative or fixed, its computational relationship will not change, still is:

Offsetleft = left + marginleft;
OffsetTop = top + margintop;

Speaking so much, what about ScrollWidth and scrollheight? ScrollWidth and scrollheight are not consistent across browsers, such as (from left to right, Chrome, Firefox, Opera, Safari, IE11)

In fact, careful study of the differences in this, you will find in the different browser P offsetleft, offsettop the properties of the two values are not exactly the same. When content in P overflows, only IE retains all of the padding values, and chrome, opera, and Safari ignore the value of Padding-right as 0. Firefox ignores Padding-right and Padding-bottom in conjunction, such as

In each browser, the scroll bar itself is rendered differently. They exclude the respective scroll bar widths when calculating scrollwidth and scrollheight. In addition to the above differences, the actual discovery of the maximum value of scrollleft and scrolltop in each browser is not the same, even the gap is very large, due to the scrollleft and scrolltop with the occurrence of scrolling events and output, the blogger on the above example of the maximum value recorded as follows:

Maximum Value	Chrome	Firefox	Opera	Safari	IE11
ScrollLeft	330	160	827	330	217
ScrollTop	230	210	485	230	330

This is actually due to the difference in scrollwidth and scrollheight caused by the differences in the attributes of these elements in different browsers, which should be paid extra attention to. However, bloggers have seen some of the data to indicate that these two properties and offsetparent, through the actual programming found that they are unrelated to the offsetparent, here does not expand the description, because the lower version of the browser, especially IE7 IE6 implementation may be more wonderful.

Various "distances" in mouse events

A lot of mouse events, but each event about the distance attribute meaning is the same, here with MouseMove to explain, the specific content will be written shortly after the JS event part of the explanation.
Mouse implementation for the current browser, the implementation is the same, the following examples are implemented in Chorme.

Mouse events have the following 6 pairs:

Event.clientx: Horizontal coordinates relative to the upper-left corner of the browser
Event.clienty: Vertical coordinates relative to the upper-left corner of the browser

EVENT.OFFSETX: Relative to Event source (event.target| | event.srcelement) horizontal offset in top left corner
Event.offsety: Relative to Event source (event.target| | event.srcelement) vertical offset in top left corner

Event.pagex: The horizontal coordinate relative to the upper-left corner of the document
Event.pagey: The vertical coordinate relative to the upper-left corner of the document

Event.layerx: Horizontal offset relative to the upper-left corner of offsetparent
Event.layery: Horizontal offset relative to the upper-left corner of offsetparent

Event.movementx: Offset from Screenx in the previous event
Event.movementy: Offset from Screeny in the previous event

Event.screenx: Horizontal coordinates relative to the upper-left corner of the screen
Event.screeny: The vertical coordinate relative to the upper-left corner of the screen

X: Same as Pagex for compatibility with IE8 and previous browsers
Y: Same as Pagey for compatibility with IE8 and previous browsers

Anyway, let's look at the picture first.

* In this figure, the black solid border represents the viewable area of the browser, and the outer blue dashed box represents the entire DOM part, the entire picture is the computer screen

Why is there no movementx and movementy in the picture? Because the value of this event is related to the previous event, the relationship is as follows:

Currentevent.movementx = Currentevent.screenx-previousevent.screenx
Currentevent.movementy = Currentevent.screeny-previousevent.screeny

Notably when OffsetX and OffsetY, he represents the offset of the mouse to the upper-left corner of the event source padding, where the MouseMove event is registered on the window, so the position.

Pagex and Clientx are different when the horizontal scroll bar of the browser is sliding. Similarly, pagey and clienty are different when the browser's vertical scroll bar is sliding, but they always have the following relationships:

Event.pagex = Event.clientx + body.scrollleft;
Event.pagey = Event.clienty + body.scrolltop;

The distance in the mouse event is simpler than the element, and the specific use is placed in the event section after the write.

Element distance attribute in jquery

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

$p.width (); element width, excluding padding and border
$p.height (); element height, excluding padding and border

$p.innerwidth (); The width within the element, including padding, not including border
$p.innerheight (); Height within the element, including padding, not including border

$p.outterwidth (); Element visible width, including padding and border
$p.outterheight (); element visible height, including padding and border

$p.outterwidth (TRUE);//element full width, including padding, border, and margin
$p.outterheight (true); Element full height, including padding, border, and margin