In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > componentFromPoint

componentFromPoint method

Browser support:

Returns the region of the current element that is located at the specified coordinates.

The returned scrollbar regions can be used for the doScroll method to simulate a click.

Syntax:

object.componentFromPoint (clientX, clientY);

You can find the related objects in the Supported by objects section below.

Parameters:

XCoord

Required. Integer that specifies the horizontal coordinate relative to the top-left corner of the browser window's client area.

YCoord

Required. Integer that specifies the vertical coordinate relative to the top-left corner of the browser window's client area.

Return value:

String. One of the following values:

empty string	The specified coordinates are inside the client area of the current element.
outside	The specified coordinates are outside the bounding rectangle of the object.
scrollbarDown	The specified coordinates are over the down scrollbar arrow.
scrollbarHThumb	The specified coordinates are over the horizontal scrollbar thumb.
scrollbarLeft	The specified coordinates are over the left scrollbar arrow.
scrollbarPageDown	The specified coordinates are over the page-down region of the vertical scrollbar.
scrollbarPageLeft	The specified coordinates are over the page-left region of the horizontal scrollbar.
scrollbarPageRight	The specified coordinates are over the page-right region of the horizontal scrollbar.
scrollbarPageUp	The specified coordinates are over the page-up region of the vertical scrollbar.
scrollbarRight	The specified coordinates are over the right scrollbar arrow.
scrollbarUp	The specified coordinates are over the up scrollbar arrow.
scrollbarVThumb	The specified coordinates are over the vertical scrollbar thumb.
handleBottom	The specified coordinates are over the bottom sizing handle.
handleBottomLeft	The specified coordinates are over the lower-left sizing handle.
handleBottomRight	The specified coordinates are over the lower-right sizing handle.
handleLeft	The specified coordinates are over the left sizing handle.
handleRight	The specified coordinates are over the right sizing handle.
handleTop	The specified coordinates are over the top sizing handle.
handleTopLeft	The specified coordinates are over the upper-left sizing handle.
handleTopRight	The specified coordinates are over the upper-right sizing handle.

The sizing handles are displayed for an element when it is inside a contentEditable element or when the designMode is turned on.

Example HTML code 1:

This example illustrates the use of the componentFromPoint method:

<head>
    <script type="text/javascript">
        function GetRegionFromPoint () {
            var compTest = document.getElementById ("compTest");
            var info = document.getElementById ("info");

            if (compTest.componentFromPoint) {  // Internet Explorer
                var region = compTest.componentFromPoint (event.clientX, event.clientY);

                if (region == "") {
                    info.innerHTML = "inside";
                }
                else {
                    info.innerHTML = region;
                }
            }
            else {
                info.innerHTML = "Your browser does not support this example!";
            }
        }
    </script>
</head>
<body onmousemove="GetRegionFromPoint ()">
    <div id="compTest" style="width:200px;height:200px;overflow:scroll;">
        <div style="width:600px;height:600px;background-color:#e0c0a0;">
        </div>
    </div>
    Move the mouse pointer over the scrollable element!
    <br /><br />
    The mouse pointer is over: <span id="info" style="color:red"></span>
</body>