À propos de l'utilisation des événements de bouton de souris js et des événements de bouton de clavier-js tutoriel-php.cn

À propos de l'utilisation des événements de bouton de souris js et des événements de bouton de clavier

不言

Libérer： 2018-06-30 11:26:22

original

1615 Les gens l'ont consulté

Cet article présente principalement l'utilisation des événements de bouton de souris js et des événements de bouton de clavier. Il résume et analyse les techniques de fonctionnement courantes de JavaScript pour les événements de souris et de clavier sous forme d'exemples. Les amis dans le besoin peuvent se référer aux exemples de ceci. article

Décrit l'utilisation des événements de bouton de souris js et des événements de bouton de clavier. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

keydown, keyup, keypress : touches du clavier qui vous appartiennent

mousedown, mouseup : boutons de la souris qui vous appartiennent

agir comme des boutons Lorsqu'il est enfoncé, un événement keydown se produit.

keyup est déclenché lorsque l'utilisateur lève la touche

Le processus complet d'appui sur une touche est divisé en deux parties : 1. La pression sur la touche est enfoncée ; 2. le bouton est relâché.

Lorsque l'utilisateur appuie sur le bouton de la souris sur cet élément, un mousedown se produit

Lorsque l'utilisateur relâche le bouton de la souris sur cet élément, un mouseup se produit

Exemple

1. Quel bouton de la souris a été cliqué

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("你点击了鼠标右键!")
}
else
{
alert("你点击了鼠标左键!")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请单击你鼠标的左键或右键试试</p>
</body>
</html>

Copier après la connexion

2. Quelles sont les coordonnées actuelles du curseur de la souris

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标： " + x + ", Y 坐标： " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>在此文档中按下你鼠标的左键看看！</p>
</body>
</html>

Copier après la connexion

3. Quel est le code Unicode de la touche enfoncée

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>

Copier après la connexion

4 Quelles sont les coordonnées du curseur actuel de la souris par rapport à l'écran

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

Copier après la connexion

5. Quelles sont les coordonnées actuelles du curseur de la souris

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.x
y=event.y
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

Copier après la connexion

6. La touche Maj est-elle enfoncée ?

<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("shit键按下了!")
}
else
{
alert("shit键没有按下!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>按下shit键，点击你鼠标的左键</p>
</body>
</html>

Copier après la connexion

7. Quel élément est actuellement cliqué

<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("你点击了 " + tname + "元素")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在这里点击看看，这里是p</p>
<h3>或者点击这里也可以呀，这里是h3</h3>
<p>你想点我吗？？</p>
<img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic">
</body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention. vers le site Web chinois PHP !

Recommandations associées :

À propos de la méthode de calcul de la taille de la pile de la pile d'appels de fonction JS

Implémentation de la technologie d'agrandissement d'image JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!