js method to determine whether the mouse position is within an div

  • 2021-01-14 05:39:15
  • OfStack

This article illustrates how js determines whether the mouse position is within an div. To share with you for your reference, as follows:

When the onmouseout event in div causes div to disappear, the event is also determined to leave div when the mouse cursor moves over something else in div, triggering an onmouseout event so that the content in div cannot be operated on. When an onmouseout event is triggered, check whether the mouse is in div first. If it is in div, it means that the mouse does not leave div, and do not delete div, otherwise, delete it. OK, problem solved now.
Is to find the div upper left and lower right corner coordinates, determine whether the mouse coordinates in this 1 region can be.


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 divx2 = div.offsetLeft + div.offsetWidth;
    var divy2 = div.offsetTop + div.offsetHeight;
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
    // If left, then execute.. 
}

The following are some commonly used attributes for easy search:

clientHeight gets the height of the object without calculating any margins, borders, or scrollbars, but includes the whitening of the object.
clientLeft Gets the distance between the offsetLeft attribute and the actual left side of the client area.
clientTop Gets the distance between the offsetTop attribute and the actual top of the client area.
ES32en takes the width of the object without calculating any margins, borders, or scrollbars, 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 offsetParent attribute.
offsetLeft Gets the computed left-hand position of the object relative to the layout or the parent coordinates specified by the offsetParent property.
offsetParent gets a reference to the container object that defines the objects offsetTop and offsetLeft properties.
offsetTop Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsetTop property.
offsetWidth Gets the width of the object relative to the layout or the parent coordinates specified by the parent offsetParent attribute.
offsetX sets or gets the x coordinates of the mouse pointer position relative to the object that triggered the event.
offsetY Sets or gets the y coordinates of the mouse pointer position relative to the object that triggered the event.
clientX,clientY The current position of the mouse relative to the page, clientX=0, clientY=0 when the mouse is in the upper left corner of the page
screenX, screenY is the position relative to the user's display

Width of visible area: document.body.clientWidth
document.body.clientHeight
Width of visible area: ES73en. ES74en. ES75en (including width of edges)
ES77en. ES78en. ES79en (including width of edge line)
document.body.scrollWidth
ES85en. ES86en. ES87en
Page scrolled out high: document.body.scrollTop
Page scrolled out to the left: document.body.scrollLeft
window.screenTop in the body of the page
window.screenLeft.screenLeft
High screen resolution: window.screen.height
Width of screen resolution: window.screen.width
Screen available workspace height: window.screen.availHeight
Screen workspace width available: window.screen.availWidth

More about JavaScript related content interested readers can view the site topic: "JavaScript search algorithm skills summary", "JavaScript animation effects and skills summary", "JavaScript error and debugging skills summary", "JavaScript data structure and algorithm skills summary", "JavaScript eraser algorithm and skills summary" and "JavaScript mathematical operation usage summary"

I hope this article is helpful to JavaScript program design.


Related articles: