Js method for determining whether the mouse position is in a div _ javascript tips-js tutorial

This article mainly introduces how to determine the mouse position in JavaScript in a div. It involves JavaScript mouse event response and page element attribute operation related skills, for more information about how to use JavaScript to determine whether the mouse position is in a certain p, see the example in this article. We will share this with you for your reference. The details are as follows:

When the onmouseout event of p causes p to disappear, it is determined that the onmouseout event is triggered when the mouse moves to other content of p, in this way, the content in p cannot be operated. The solution is to first judge whether the mouse is inside p when the onmouseout event is triggered. If the mouse is inside p, it indicates that the mouse mark has not left p and p is not deleted. Otherwise, delete it. OK. Now the problem is solved.
Find the coordinates in the upper left corner and lower right corner of the p to determine whether the mouse coordinates are in this area.

P. onmouseout = function (event) {var p = document. getElementById ("test"); var x = event. clientX; var y = event. clientY; var px1 = p. offsetLeft; var py1 = p. offsetTop; var px2 = p. offsetLeft + p. offsetWidth; var py2 = p. offsetTop + p. offsetHeight; if (x <px1 | x> px2 | y <py1 | y> py2) {// if it is 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 mouse is in the upper left corner of the page, clientX = 0, clientY = 0 screenX, and screenY is relative to the user's display.

Visible area width: document. body. clientWidth: the visible area of the webpage is high: document. body. visible area width of clientHeight webpage: document. body. offsetWidth (including the width of the edge) visible area of the webpage Height: document. body. offsetHeight (including the edge width): document. body. scrollWidth: The full text of the webpage is high: document. body. scrollHeight the height of the webpage to be rolled: document. body. the left: document. body. scrollLeft: window. screenTop page text part left: window. screenLeft screen resolution Height: window. screen. height the screen resolution width: window. screen. width: available workspace height of the screen: window. screen. availHeight available workspace width: window. screen. availWidth

The above is the content of the method _ javascript technique used by js to determine whether the mouse position is in a certain p. For more information, see the PHP Chinese website (www.php1.cn )!