Home >Web Front-end >JS Tutorial >How to write js mouse click events in various browsers and introduction to Event object properties_Basic knowledge

How to write js mouse click events in various browsers and introduction to Event object properties_Basic knowledge

WBOY
WBOYOriginal
2016-05-16 17:42:521213browse
IE
The left button is window.event.button = 1
The right button is window.event.button = 2
The middle button is window.event.button = 4
No button Action window.event.button = 0

Firefox
The left button is event.button = 0
The right button is event.button = 2
The middle button is event. button = 1
No key action event.button = 0

Opera 7.23/7.54
The left mouse button is window.event.button = 1
No key action window.event.button = 1
The right and middle buttons cannot be obtained

Opera 7.60/8.0
The left mouse button is window.event.button = 0
None Key action window.event.button = 0
The right button and middle button cannot be obtained

In addition: the right button is blocked by window.event.button = 3

******* *************************************************** ***

Window.event object represents the status of the event, such as the element that triggered the event object, the position and status of the mouse, the key pressed, etc.
The Window.event object is only valid during the event.
Some properties of Window.event are only meaningful for specific events. For example, the fromElement and toElement properties are only meaningful for onmouseover and onmouseout events.
If the mouse moves out of the window after the event is triggered, the returned value is -1, which is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.

The properties of the Event object are :
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey , srcElement, srcFilter, toElement, type, x, y

The following is a brief description of its properties:
1.altKey
Description : Check the status of alt key.
Syntax: event.altKey
Possible values: TRUE when the alt key is pressed, FALSE otherwise. Read only.

2.button
Description: Check the pressed mouse button.
Syntax: event.button
Possible values:
0 No button pressed; 1 Press the left button; 2 Press the right button; 3 Press the left and right buttons; 4 Press the middle button; 5 Press the left and middle buttons; 6 Press the right and middle keys; 7 Press all keys
This attribute is only used for onmousedown, onmouseup, and onmousemove events. For other events, 0 is returned regardless of the mouse status (such as onclick).

3.cancelBubble
Description: Detect whether to accept the control of the event of the upper element.
Syntax: event.cancelBubble[ = cancelBubble]
Possible values: This is a readable and writable Boolean value
TRUE is not controlled by events of the upper element.
FALSE allows to be controlled by events of upper element. This is the default value.

4.clientX
Description: Returns the X coordinate of the mouse in the client area of ​​the window.
Syntax: event.clientX
Comments: This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.

5.clientY
Description: Returns the Y coordinate of the mouse in the client area of ​​the window.
Syntax: event.clientY
Comments: This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.

6.ctrlKey
Description: Check the status of the ctrl key.
Syntax: event.ctrlKey
Possible values: TRUE when the ctrl key is pressed, FALSE otherwise. Read only.

7.fromElement
Description: Detect 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
Description: Detect the internal code corresponding to keyboard events. This property is used for onkeydown, onkeyup, and onkeypress events.
Syntax: event.keyCode[ = keyCode]
Possible values: This is a readable and writable value, which can be any Unicode keyboard internal code. If no keyboard event was raised, the value is 0 .

9.offsetX
Description: Check the horizontal coordinate of the mouse position relative to the object that triggered the event
Syntax: event.offsetX

10.offsetY
Description: Check the vertical coordinate of the mouse position relative to the object that triggered the event
Syntax: event.offsetY

11.propertyName
Description: Sets or returns the name of the element's changed attribute.
Syntax: event.propertyName [= sProperty]
Possible values: sProperty is a string that specifies or returns the name of the property that changed in the event of the element that triggered the event.
Note: This property is readable and writable. No default value. You can get the value of propertyName by using the onpropertychange event.

12.returnValue
Description: Set or check the value returned from the event
Syntax: event.returnValue[=Boolean]
Possible values: true event The value in is returned
false and the default action of the event on the source object is canceled

13.screenX
Description: Detects the horizontal position of the mouse relative to the user's screen
Syntax: event.screenX
Comments: This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.

14.screenY
Description: Detect the vertical position of the mouse relative to the user's screen
Syntax: event.screenY
Comments: This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.

15.shiftKey
Description: Check the status of the shift key.
Syntax: event.shiftKey
Possible values: TRUE when the shift key is pressed, FALSE otherwise. Read only.

16.srcElement
Description: Returns the element that triggered the event. Read only. See the example at the beginning of this article.
Syntax: event.srcElement

17.srcFilter
Description: Returns the filter that triggers the onfilterchange event. Read only.
Syntax: event.srcFilter

18.toElement
Description: Detect the element that the mouse enters when the onmouseover and onmouseout events occur. Reference 7.fromElement
Syntax: event.toElement
Note: This is a read-only property.

19.type
Description: Returns the event name.
Syntax: event.type
Notes: Returns the event name without "on" as a prefix. For example, the type returned by the onclick event is click read-only.

20. x
Description: Returns the x-axis coordinate of the mouse relative to the parent element with the position attribute in the css attribute. If there is no parent element with a position attribute in the css attribute, the BODY element will be used as the reference object by default.
Syntax: event.x
Notes: If the mouse moves out of the window after the event is triggered, the returned value is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.

21. y
Description: Returns the y-axis coordinate of the mouse relative to the parent element with the position attribute in the css attribute. If there is no parent element with a position attribute in the css attribute, the BODY element will be used as the reference object by default.
Syntax: event.y
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn