Introduction to mouse events and distance properties in js

This article brings you an introduction to mouse events and distance attributes in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are many "distances" in js. In order not to confuse, here is a summary of some of the distances

This article includes element attributesrelated distances and mouse events# The distance in ##, without further ado, let’s get into the text

Let me add that 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 run on macOS Sierra 10.12, and IE11 runs on a virtual machine equipped with windows10 1607

Various "distances" in element attributes

The distances in element attributes are The following 6 pairs:

scrollLeft: Sets or gets the distance between the left edge of the object and the leftmost end of the visible content in the window

scrollTop: Sets or gets the distance between the topmost edge of the object and the topmost visible content in the window distance
offsetHeight: Get the height of the object's visible area, including the border

offsetWidth: Get the width of the object's visible area, including the border

clientHeight: Get the height of the part within the object's border

clientWidth: Get the width of the inner part of the object border

offsetLeft: Get the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetParent property

offsetTop: Get the object relative to the layout or by offsetTop The calculated top position of the parent coordinate specified by the attribute

clientTop: Gets the width of the top border of the object

clientLeft: Gets the width of the left border of the object

scrollWidth: Gets the scroll width of the object

scrollHeight : Get the scroll height of the object.

The offsetParent attribute is mentioned above. In fact, this attribute is who the current p is positioned relative to. Depending on the position value, there are the following two situations

• When the parent element has no relative attribute, regardless of whether the position of the current element is absolute, relative, fixed or fixed, the offsetParent is the body element

• When the parent element has a relative attribute, regardless of whether the position of the current element is absolute, relative, fixed or fixed, offsetParent is the nearest parent element with a relative attribute

Can’t tell the difference? Look at the picture below

You can clearly see the first 4 pairs above and the relationship between them.

Regarding jQuery’s element distance attributes, the article finally sorts out their relationship with DOM attributes.

The first thing worth emphasizing is that the box-sizing attribute of p in the above example 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 defaults to this):

offsetHeight = height;

offsetWidth = width;
clientHeight = height - borderTopWidth - borderBottomWidth;

clientWidth = width - borderLeftWidth - borderRightWidth;

The second thing worth emphasizing is that in this example, since its parent element does not have position:relative set, the p in the picture uses position:absolute; to position it relative to the document. If you add it to A parent p with the position:relative attribute, then offsetLeft and offsetTop are as shown below:

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

offsetLeft = left marginLeft;

offsetTop = top marginTop;

Having said so much, then scrollWidth What about scrollHeight? scrollWidth and scrollHeight are not consistent in different browsers, as shown below (from left to right, Chrome, Firefox, Opera, Safari, IE11)

In fact, if you study the differences carefully, you will find that the attributes of the offsetLeft and offsetTop values ​​of p in different browsers are not exactly the same. When the content in p overflows, only IE retains all the values ​​of padding. Chrome, Opera and Safari will ignore the value of padding-right and treat it as 0. Firefox will ignore both padding-right and padding-bottom, as shown below

In each browser, the rendering of the scroll bar itself is also different. They exclude their respective scroll bar widths when calculating scrollWidth and scrollHeight. In addition to the above differences, it is actually found that the maximum values ​​of scrollLeft and scrollTop in each browser are also different, or even very different. Since scrollLeft and scrollTop are output when the scroll event occurs, the blogger recorded the maximum value of the above example as follows:

##scrollLeft330160827330217scrollTop230210485230330

maximum value	chrome	Firefox	opera	safari	IE11

In fact, it is due to the differences in the attributes of these elements in different browsers that the scrollWidth and scrollHeight are different. Special attention should be paid to the specific use. However, the blogger has read some information indicating that these two attributes are related to offsetParent. Through actual programming, it is found that they have nothing to do with offsetParent. I will not describe them here because the implementation method of lower version browsers, especially ie7 and ie6, may be weird.

Various "distances" in mouse events

There are many mouse events, but the meaning of

distance in each event is the same. Here we use mousemove to explain , the specific content will be explained in the js event section soon. The mouse implementation is the same for current browsers. The following examples are all implemented in Chrome.

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: Horizontal offset relative to the upper left corner of the event source (event.target||event.srcElement)

event.offsetY: Vertical offset relative to the upper left corner of the event source (event.target||event.srcElement)

event.pageX: Horizontal coordinate relative to the upper left corner of the document

event.pageY: 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 relative to screenX in the previous event

event.movementY: offset relative to screenY in the previous event

event.screenX: Horizontal coordinates relative to the upper left corner of the screen

event.screenY: Vertical coordinates relative to the upper left corner of the screen

x: Same as pageX, used for compatibility with IE8 and Previous browser

y: Same as pageY, used to be compatible with IE8 and previous browsers

In short, let’s look at the picture first

## *In this picture, the solid black border represents the visible area of ​​the browser, and the outer blue dotted frame represents the entire DOM part. The entire picture is a computer screen.
Why are there no movementX and movementY in the picture? Because of this event The value is related to the previous event, and the relationship is as follows:

currentEvent.movementX = currentEvent.screenX - previousEvent.screenX

currentEvent.movementY = currentEvent.screenY - previousEvent.screenY

It is worth noting offsetX and offsetY, It represents the offset of the mouse to the upper left corner of the event source padding. The mousemove event here is registered on the window, so the position is as shown in the figure.

When the horizontal scroll bar of the browser slides, pageX and clientX are different. In the same way, when the browser's vertical scroll bar slides, pageY and clientY are different, but they always have the following relationship:

event.pageX = event.clientX body.scrollLeft;

event.pageY = event. clientY body.scrollTop;

The distance in the mouse event is simpler than that in the element. The specific use will be left in the event part written later.

Element distance attribute in jQuery

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

$p.width(); //Element width, excluding padding and border

$p.height(); //Height of element, excluding padding and border

$p.innerWidth(); //Inner width of element, including padding, excluding border

&dollar ;p.innerHeight(); //The inner height of the element, including padding, excluding border

$p.outterWidth(); //The visible width of the element, including padding and border

$p. outerHeight(); //The visible height of the element, including padding and border

##$p.outterWidth(true); //The full width of the element, including padding, border and margin
$p.outterHeight( true); //The entire height of the element, including padding, border and margin

Related recommendations:

jquery method to calculate the distance between the mouse and the specified element_jquery

js about mouse leave event

The above is the detailed content of Introduction to mouse events and distance properties in js. For more information, please follow other related articles on the PHP Chinese website!