JavaScript event events and getting the mouse cursor

JavaScript event events and getting the mouse cursor--

JavaScript event events and getting the mouse cursor
JavaScript event events and getting the mouse cursor

<script>
var Canmove=false;
var leftx=0,topy=0,newx=0,newy=0;
function showpx () {
var Obj=document.getelementbyid ("Tbl1");
var objp=obj.offsetparent
Alert ("Top:" + Obj.offsettop + "Left:" +obj.offsetleft + "px" + objp.offsettop + "py" +

Objp.offsetleft);
}

Function moveable () {
if (event.srcelement.id== "Movearea")
Canmove=true;
leftx= (event.clientx+document.body.scrollleft)-wizard.style.pixelleft;
Topy= (event.clienty+document.body.scrolltop)-wizard.style.pixeltop;
Wizard.style.pixelLeft = Wizard.offsetleft;
Wizard.style.pixelTop = Wizard.offsettop;
Event.clientx,event.clienty: Represents the location of the current event's mouse in the screen navigation area, respectively
Wizard.style.pixelleft,wizard.style.pixeltop: Represents the value of the XY point of the specified element
Wizard.offsetleft | Wizard.offsetleft and
Wizard.style.pixelLeft | Wizard.style.pixelTop values are the same and should be different in some situations?
Note the case,
}
function movedisable () {
Canmove=false;
}
function Move () {
if (canmove) {
Newx = (event.clientx + document.body.scrollLeft);
Newy = (event.clienty + document.body.scrollTop);
WIZARD.STYLE.PIXELLEFT=NEWX-LEFTX;
Wizard.style.pixeltop=newy-topy;
Event.returnvalue = false;
}
}
document.onmousedown=moveable;
document.onmouseup=movedisable;
Document.onmousemove=move;
WINDOW.ONRESIZE=SHOWPX;
SHOWPX ()//If you place this script segment at the bottom of the HTML, SHOWPX can perform a normal
</script>
<table id= "Wizard" cellspacing= "0" style= "position:absolute;left:300;top:150;background: #EEEEEE; border:1

Solid

#CCCCCC ">
<tr bgcolor= "Black" id= "Movearea" >
<TD align= "Right" id= "Movearea" >
<font color= ' White ' > Latest news </font>
</td>
<TD align= "Right" id= "Movearea" >
<a href= "#" onclick= "wizard.style.display= ' None '" ><font color= ' White ' >[close]</font></a>
</td>
</tr>
<tr>
<td>

</td>
<TD valign= "Top" ><br><br>
<a href= '../news/messview.net?idmessage=11147 ' ><b><font

Color= ' Red ' >10 month 23rd Windows host upgrade notification!</font></b><br>[2004-10-21]</a><br><a

Href= '../news/messview.net?idmessage=11060 ' ><b><font

Color= ' Red ' >CN agent price down again, low to the industry most. </font></b><br>[2004-10-18]</a><br><a

Href= '../news/messview.net?idmessage=11059 ' ><b><font

color= ' Red ' > Industry panic, buy the country's top CN domain name to send international domain name. </font></b><br>[2004-10-18]</a><br> </td>
</tr>
</table>
&nbsp;&nbsp;&nbsp;
<table width= ' 100% ' >
<tr>
<TD width= ' 20% ' >
<table id=tbl2><tr><td>test1</td></tr></table>
</td>
<TD width= ' 20% ' >
<table id=tbl1><tr><td>test2</td></tr></table>
</td>
<TD width= ' 20% ' >
<table id=tbl3><tr><td>test3</td></tr></table>
</td>
</tr>
</table>

Note:
Event object:
Button: In the Mousedown,mouseup,click event, which key is pressed
0-left, 1-middle key, 2-right button
Altkey,ctrlkey,metakey,shiftkey: Keyboard properties are valid for any mouse event
Clientx,clienty: The XY coordinates of the mouse pointer relative to the customer area, regardless of document scrolling
If you want to roll the form into the meter, add document.body.scrollleft,document.body.scrolltop
Screenx,screeny: The value of the mouse pointer relative to the XY coordinate of the upper-left corner of the user's display
Type: The types of events that occur, such as Click,mouseover
Srcelement: Document element in which the event occurred
Offsetx,offsety: The position of the mouse pointer relative to the source element, using them to determine which pixel of the image was clicked
KeyCode: The integer property declares the key code for the Keydown,keyup event, as well as the Unicode character of the KeyPress event.
Use String.fromCharCode () to convert character codes to strings.
Fromelement: Declares a document element in the MouseOver event that the mouse has moved
The document element that the mouse moves to in the Toelement:mouseout event.
Cancelbubble: A Boolean value, set to True to prevent the current event from further bubbling
Same as the Stoppropagation () method for the event object of Level 2 DOM
ReturnValue: Boolean value, set to False to prevent browser from performing default actions related to events
Preventdefault () method of event object with Level 2 DOM

--------------------------------------------------------the added part------------------------------------------------------------ --------------

Describes the state of an event, such as the element that triggers the events object, the position and state of the mouse, the pressed key, and so on.  The event object is valid only if it occurs. Some properties of an event are only meaningful for a particular event. For example, the fromelement and toelement attributes are only meaningful for onmouseover and onmouseout events. The example below checks to see if the mouse clicks on the link and cancels the link jump if the SHIFT key is pressed. < html>
<script language= "JScript" >
function Cancellink () {
if (Window.event.srcElement.tagName = "A" && Window.event.shiftKey)
Window.event.returnvalue = false;
}
</SCRIPT>
< body onclick= "Cancellink ()" > The following example shows the current position of the mouse on the status bar. < body onmousemove= "window.status = ' x= ' + window.event.x + ' y= ' + window.event.y ' >
Properties: Altkey, Button, cancelbubble, ClientX, ClientY, Ctrlkey, Fromelement, KeyCode, OffsetX, OffsetY, PropertyName, return Value, ScreenX, ScreenY, Shiftkey, srcelement, Srcfilter, toelement, type, x, y---------------------------------------- ----------------------------------------1.altKey
Describe:
Check the status of the ALT key. Grammar:
Event.altkey Possible values:
TRUE if the ALT key is pressed, or FALSE. Read-only.
2.button
Describe:
Check the pressed mouse button. Grammar:
Event.button Possible values:
0 No buttons.
1 Press left button
2 Press the right button
3 Press about key
4 Press the Middle key
5 left and Middle keys
6 Press right and middle key
7 Press All keys This property is used only for onmousedown, onmouseup, and onmousemove events. For other events, returns 0 (such as onclick), regardless of mouse state. 3.cancelBubble
Describe:
Detects whether to accept control of events for upper-level elements. Grammar:
event.cancelbubble[= cancelbubble] Possible value:
This is a read-write Boolean value: TRUE is not controlled by the events of the upper element.
FALSE allows to be controlled by the events of the upper element. This is the default value. Example:
The following code fragment shows the SHOWSRC () function that is raised by the event onclick on the upper element (body) When the SHIFT key is pressed as well when clicked (onclick) on the picture. <script language= "JScript" >
function Checkcancel () {
if (Window.event.shiftKey)
Window.event.cancelBubble = true;
}
function Showsrc () {
if (Window.event.srcElement.tagName = "IMG")
alert (WINDOW.EVENT.SRCELEMENT.SRC);
}
</SCRIPT>
<body onclick= "showsrc ()" >

4.clientX
Describe:
Returns the x-coordinate of the mouse in the client area of the window. Grammar:
Event.clientx Note:
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
5.clientY
Describe:
Returns the y-coordinate of the mouse in the client area of the window. Grammar:
Event.clienty Note:
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
6.ctrlKey
Describe:
Check the state of the CTRL key. Grammar:
Event.ctrlkey Possible values:
The value is TRUE when the CTRL key is pressed, or FALSE. Read-only.
7.fromElement
Describe:
Detects the element that the mouse leaves when the onmouseover and onmouseout events occur. Reference: 18.toElement Syntax:
Event.fromelement Note:
This is a read-only property.
8.keyCode
Describe:
(Please refer to http://www.joyist.com/forum/showto ...). id=31&forum_id=2)
detects the internal code corresponding to the keyboard event.
This property is used for onkeydown, onkeyup, and onkeypress events. Grammar:
event.keycode[= KeyCode]
Possible values:
This is a read-write value that can be any one of the Unicode keyboard codes. If a keyboard event is not raised, the value is 0.
9.offsetX
Describe:
Check the horizontal coordinate syntax for the mouse position relative to the object triggering the event:
Event.offsetx
10.offsetY
Describe:
Check the vertical coordinate syntax for the mouse position relative to the object triggering the event:
Event.offsety
11.propertyName
Describe:
Sets or returns the name of the changed property of the element. Grammar:
Event.propertyname [= Sproperty] Possible values:
Sproperty is a string that specifies or returns the name of the attribute that triggered the event that changed the element in the event.
This property is readable and writable. No default value. Comments:
You can get the PropertyName value by using the Onpropertychange event. Example:
The following example uses the Onpropertychange event to pop up a dialog box that displays the value of the PropertyName. <HEAD>
<SCRIPT>
function Changeprop ()
{
Btnprop.value = "This is the new value";
} function Changecssprop ()
{
BtnStyleProp.style.backgroundColor = "Aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<p>the Event Object PropertyName is
Used which property has been
altered.</p> <input Type=button id=btnprop onclick= "Changeprop ()"
Value= "Click to change" The value of this button "
Onpropertychange= ' Alert (event.propertyname+ "property has changed value") ' >
<input Type=button Id=btnstyleprop
Onclick= "Changecssprop ()"
Value= ' Click to change ' CSS backgroundcolor property ' This button '
Onpropertychange= ' Alert (event.propertyname+ "property has changed value") ' >
</BODY>
12.returnvalue
Describe:
Sets or checks the value syntax returned from an event:
event.returnvalue[= Boolean] Possible value:
The value in the true event is returned
False the default action for events on the source object is canceled example see the beginning of this article.
13.screenX
Describe:
Detects the horizontal position of the mouse relative to the user's screen:
Event.screenx
Comments:
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
14.screenY
Describe:
Detects the vertical position syntax of the mouse relative to the user's screen:
Event.screeny Note:
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
15.shiftKey
Describe:
Check the state of the SHIFT key. Grammar:
Event.shiftkey Possible values:
The value is TRUE when the SHIFT key is pressed, or FALSE. Read-only.
16.srcElement
Describe:
Returns the element that triggers the event. Read-only. Examples are shown at the beginning of this article. Grammar:
Event.srcelement
17.srcFilter
Describe:
Returns the filter that triggers the onfilterchange event. Read-only. Grammar:
Event.srcfilter
18.toElement
Describe:
Detects the elements that the mouse enters when the onmouseover and onmouseout events occur. Reference: 7.fromElement Syntax:
Event.toelement Note:
This is a read-only property. Example: The following code shows a dialog box that displays "mouse arrived" when you move the mouse over the button <SCRIPT>
function Testmouse (oobject) {
if (Oobject.contains (event.toelement)) {
Alert ("Mouse arrived");
}
}
</SCRIPT>
:
<button Id=obutton onmouseover= "Testmouse (This)" >mouse over this.</button>
19.type
Describe:
Returns the event name. Grammar:
Event.type Note:
Returns the name of an event without "on" as a prefix, for example, the type returned by the onclick event is click
Read-only.
X. X
Describe:
Returns the x-coordinate of the mouse relative to the parent element of the Position property in the CSS property. If there is no ancestor element with the position attribute in the CSS property, the BODY element is used as the reference object by default. Grammar:
Event.x Note:
If the mouse moves outside the window after the event is triggered, the value returned is-1
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
Y
Describe:
Returns the y-coordinate of the mouse relative to the parent element of the Position property in the CSS property. If there is no ancestor element with the position attribute in the CSS property, the BODY element is used as the reference object by default. Grammar:
EVENT.Y Note:
If the mouse moves outside the window after the event is triggered, the value returned is-1
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.