componentFromPoint method
[This documentation is preliminary and is subject to change.]
Returns the component located at the specified coordinates via certain events.
Syntax
object.componentFromPoint(x, y)Standards information
There are no standards that apply here.
Parameters
- x [in]
-
Type: long
Specifies the client window coordinate of x.
- y [in]
-
Type: long
Specifies the client window coordinate of y.
Return value
Type: StringString. Returns one of the following possible values.| Return value | Description |
|---|---|
|
Component is inside the client area of the object. |
|
Component is outside the bounds of the object. |
|
Down scroll arrow is at the specified location. |
|
Horizontal scroll thumb or box is at the specified location. |
|
Left scroll arrow is at the specified location. |
|
Page-down scroll bar shaft is at the specified location. |
|
Page-left scroll bar shaft is at the specified location. |
|
Page-right scroll bar shaft is at the specified location. |
|
Page-up scroll bar shaft is at the specified location. |
|
Right scroll arrow is at the specified location. |
|
Up scroll arrow is at the specified location. |
|
Vertical scroll thumb or box is at the specified location. |
|
Bottom sizing handle is at the specified location. |
|
Lower-left sizing handle is at the specified location. |
|
Lower-right sizing handle is at the specified location. |
|
Left sizing handle is at the specified location. |
|
Right sizing handle is at the specified location. |
|
Top sizing handle is at the specified location. |
|
Upper-left sizing handle is at the specified location. |
|
Upper-right sizing handle is at the specified location. |
Remarks
The componentFromPoint method, available as of Microsoft Internet Explorer 5, is applicable to any object that can be given scroll bars through Cascading Style Sheets (CSS).
The componentFromPoint method might not return the same object consistently when it is used with the onmouseover event. Because a user's mouse speed and entry point can vary, different components of an element can fire the onmouseover event. For example, when a user moves the cursor over a textArea object with scroll bars, the event might fire when the mouse enters the component border, the scroll bars, or the client region. After the event fires, the expected element might not be returned, unless the scroll bars were the point of entry for the mouse. In this case, the onmousemove event can be used to provide more consistent results.
For the object's sizing handles to appear, designMode must be On, and the object must be selected.
Examples
This example uses the componentFromPoint method to determine which object the mouse pointer is hovering over.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/componentFromPointEX1.htm
<HTML>
<HEAD>
<SCRIPT>
/*When this function is activated, an alert pops up displays the component at the position of the pointer. */
function ComponentSnapShot(){
var sElem = "";
sElem = document.body.componentFromPoint(
event.clientX,
event.clientY
);
if (sElem=="")
alert("No component there!");
else
alert("Component: " + sElem);
}
function trackElement(){
var sElem = "";
sElem = document.body.componentFromPoint(
event.clientX,
event.clientY
);
window.status = "mousemove " + event.clientX + ", "
+ event.clientY +
" The mouse pointer is hovering over: " + sElem;
}
</SCRIPT>
</HEAD>
<!-- There are several different events that can be used with componentFromPoint. Below are a few of them.
Be carefull! Not all mouse events can be used with componentFromPoint. -->
<BODY onmousemove="trackElement()" onmousedown="ComponentSnapShot()" onkeydown="ComponentSnapShot()" oncontextmenu="ComponentSnapShot()">
<TEXTAREA COLS=500 ROWS=500>
This text forces scroll bars to appear in the window.
</TEXTAREA>
</BODY>
</HTML>
See also
- a
- abbr
- acronym
- address
- applet
- area
- article
- aside
- b
- base
- baseFont
- bgSound
- big
- blockQuote
- body
- br
- button
- caption
- center
- cite
- code
- col
- colGroup
- comment
- custom
- dd
- del
- dfn
- dir
- div
- dl
- dt
- em
- embed
- fieldSet
- figcaption
- figure
- font
- footer
- form
- frame
- frameSet
- head
- header
- hgroup
- hn
- hr
- html
- i
- iframe
- img
- input type=button
- input type=checkbox
- input type=file
- input type=hidden
- input type=image
- input type=password
- input type=radio
- input type=reset
- input type=submit
- input type=text
- ins
- isIndex
- kbd
- label
- legend
- li
- link
- listing
- map
- mark
- marquee
- menu
- nav
- nextID
- noBR
- noFrames
- noScript
- object
- ol
- option
- p
- plainText
- pre
- q
- rt
- ruby
- s
- samp
- script
- section
- select
- small
- span
- strike
- strong
- style
- sub
- sup
- table
- tBody
- td
- textArea
- tFoot
- th
- tHead
- title
- tr
- tt
- u
- ul
- var
- wbr
- xml
- xmp
- Reference
- doScroll
- onscroll
Build date: 3/8/2012
I'm using the script as shown but the alert reports "Component: outside" . I'm using it with onscroll like so.
[script]
function ComponentSnapShot(){
var sElem=' ';
sElem = document.getElementById('f1').componentFromPoint(event.clientX, event.clientY);
if(sElem=='scrollbarUP')//No alert ?
alert("HELLO WORLD!");
else
alert("Component: " + sElem);
}
addEvent(f1,'scroll',function(){ComponentSnapShot();},false);
[/script]
- 2/24/2012
- Heinz Stapff
- 2/23/2012
- Heinz Stapff
