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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content