Js method to determine whether the mouse position is in a div, jsdiv

Js method to determine whether the mouse position is in a div, jsdiv

This example describes how to use JavaScript to determine whether the mouse position is in a div. We will share this with you for your reference. The details are as follows:

When the onmouseout event of the div disappears, this situation occurs. When you move the cursor to other content in the div, it is also determined to leave the div, which triggers the onmouseout event, in this way, the content in the div cannot be operated. The solution is to determine whether the mouse is inside the div when the onmouseout event is triggered. If the mouse is inside the div, the mouse label does not leave the div. Otherwise, the mouse label is deleted. OK. Now the problem is solved.
Find the coordinates in the upper left corner and lower right corner of the div to determine whether the coordinates of the mouse are in this area.

Div. onmouseout = function (event) {var div = document. getElementById ("test"); var x = event. clientX; var y = event. clientY; var divx1 = div. offsetLeft; var divy1 = div. offsetTop; var divx= div. offsetLeft + div. offsetWidth; var divy2 = div. offsetTop + div. offsetHeight; if (x <divx1 | x> divx| | y <divy1 | y> divy2) {// if left, run ..}

Some common attributes are listed below to facilitate searching:

ClientHeight obtains the height of an object. It does not calculate any margin, border, or scroll bar, but includes the padding of the object.
ClientLeft gets the distance between the offsetLeft attribute and the actual left side of the customer region.
ClientTop obtains the distance between the offsetTop attribute and the actual top of the customer region.
ClientWidth is used to obtain the width of an object. It does not calculate any margin, border, or scroll bar, but includes the padding of the object.
OffsetHeight gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.
OffsetLeft obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute.
OffsetParent gets the reference of the container Object Defining the offsetTop and offsetLeft attributes of the object.
OffsetTop obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.
OffsetWidth gets the width of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.
OffsetX is used to set or obtain the x coordinate between the cursor position and the object that triggers the event.
OffsetY is used to set or obtain the y coordinate of the object relative to the trigger event.
ClientX: the current position of the clientY mouse relative to the webpage. When the cursor is in the upper left corner of the page, clientX = 0 and clientY = 0
ScreenX and screenY are relative to the user's display.

Visible area width of the webpage: document. body. clientWidth
Visible area height: document. body. clientHeight
Visible area width of the webpage: document. body. offsetWidth (including the width of the edge)
Visible area height of the webpage: document. body. offsetHeight (including the width of the edge)
Webpage text width: document. body. scrollWidth
Webpage text height: document. body. scrollHeight
The height of the page to be rolled: document. body. scrollTop
Left: document. body. scrollLeft
Page body: window. screenTop
Page body part left: window. screenLeft
Screen Resolution height: window. screen. height
Screen Resolution width: window. screen. width
Available screen workspace Height: window. screen. availHeight
Available workspace width: window. screen. availWidth