Common mouse events and keyboard events

Common mouse events

One . Disable text selection and right-click menu

 1. Disable right mouse button menu
contextmenu It mainly controls when the context menu should be displayed , It is mainly used by programmers to cancel the default context menu

2. Disable mouse selection ( selectstart Start selecting )

 

  Example ：

  Two . Get the coordinates of the mouse in the page

Mouse event object

event Object represents the state of the event , A collection of information related to an event . At this stage, we mainly use the mouse event object MouseEvent And keyboard event objects KeyboardEvent.

Example ： 

  3、 ... and . Angel following the mouse

case analysis ：

1. The mouse keeps moving , Use the mouse to move events :  mousemove Move... In the page , to document Registration events
2. The picture should move a distance , And it doesn't take up a place , We can use absolute positioning
3. The core principle : Every time the mouse moves , We all get the latest mouse coordinates , Put this x and y The coordinates are the coordinates of the picture top and left Value to move the picture

Common keyboard events

  Be careful :
1. If you use addEventListener No need to add on

2. onkeypress And the front 2 The difference is , It does not recognize function keys , For example, left and right arrows ,shift etc. .

3. The order of execution of the three events is :keydown -- keypress --- keyup

  Four .keyCode Determine which key the user presses

Be careful :

onkeydown and onkeyup Case insensitive ,onkeypress Case sensitive . In our actual development , We use more keydown and keyup, It recognizes all the keys （ Including function keys )Keypress The function key is not recognized , however keyCode Properties are case sensitive , Return to a different ASCII value

5、 ... and . Simulate Jingdong key input content

1. When you enter the content in the express order No , The big font box above (con) Show ( The words in this

2. At the same time, the value in the express order number ( value ) Get and assign to con The box ( innerText ) As content

3. If the content in the express order number is empty , Then hide the large font box (con) The box

4. Be careful :：keydown and keypress The features in the text box ∶ When both of them were triggered , The text has not yet fallen into the text box

5.keyup When the event is triggered , The text has fallen into the text box

6. When we lose focus , Just hide this con The box

7. When we get the focus , And the content of the text box is not empty , Just show this con The box