Événements courants de la souris et du clavier

Événements courants de la souris

Un..Désactiver le texte sélectionné et désactiver le menu contextuel

 1.Désactiver le menu du bouton droit de la souris
contextmenuContrôle principal quand afficher le menu contextuel,Principalement utilisé par les programmeurs pour annuler le menu contextuel par défaut

2.Désactiver la sélection de la souris( selectstartCommencez à sélectionner)

 

 Exemple：

 2..Obtenir les coordonnées de la souris dans la page

Objet de l'événement de la souris

eventL'objet représente l'état de l'événement,Une collection d'informations liées à un événement.À ce stade, nous utilisons principalement des objets d'événements de sourisMouseEventEt les objets d'événements clavierKeyboardEvent.

Exemple： 

 Trois.L'ange qui suit la souris

Analyse de cas：

1.Le mouvement constant de la souris,Déplacer les événements avec la souris:  mousemoveDéplacer dans la page,Voilà.documentÉvénements enregistrés
2.L'image à déplacer,Et il n'y a pas de place,Nous pouvons utiliser le positionnement absolu
3.Principes fondamentaux:Chaque fois que la souris se déplace,Nous aurons tous les deux les dernières coordonnées de la souris,Prends ça.xEtyLes coordonnées sont prises comme imagetopEtleftLa valeur déplace l'image

Événements clavier courants

 Attention!:
1.Si vous utilisezaddEventListenerPas besoin d'ajouteron

2. onkeypressEt devant.2La différence entre,Il ne reconnaît pas les touches de fonction,Comme les flèches gauche et droite,shiftAttendez..

3.L'ordre d'exécution des trois événements est:keydown -- keypress --- keyup

 Quatre.keyCode Déterminer quelle clé l'utilisateur appuie

Attention!:

onkeydownEtonkeyup Insensible à la casse,onkeypressSensible à la casse.Dans notre développement pratique,Nous utilisons pluskeydownEtkeyup,Il reconnaît toutes les clés（Y compris les touches de fonction)KeypressClé de fonction non reconnue,MaiskeyCodePropriété sensible à la casse,Retour à un autreASCIIValeur

Cinq.Simuler l'entrée de la clé JD

1.Lors de l'entrée du numéro de commande Express,La grande boîte de police au - dessus(con)Afficher( C'est écrit ici.

2.En même temps, mettez la valeur dans la facture Express( value )Obtenir pour assigner une valeur àconLa boîte( innerText )Comme contenu

3.Si le contenu de la lettre de livraison est vide, La grande boîte de police est cachée (con)La boîte

4.Attention!:：keydownEtkeypressCaractéristiques dans la zone de texte∶Quand les deux événements se sont déclenchés,Le texte n'est pas encore entré dans la zone de texte

5.keyupLorsque l'événement est déclenché,Le texte est déjà dans la zone de texte

6.Quand on perd la concentration,Cache çaconLa boîte

7.Quand on aura le focus,Et le contenu de la zone de texte n'est pas vide,Montre - moi ça.conLa boîte