ホームページ > 記事 > ウェブフロントエンド > jsのマウスボタンイベントとキーボードボタンイベントの使用について
jsのマウスボタンイベントとキーボードボタンイベントの使用について
- 不言オリジナル
- 2018-06-30 11:26:221598ブラウズ
この記事では、js のマウス ボタン イベントとキーボード ボタン イベントの使用法を主に紹介し、マウスとキーボードのイベントに対する JavaScript の一般的な操作テクニックをサンプルの形式でまとめて分析します。 JS マウス ボタン イベントとキーボード キー イベントの使用例。参考までに皆さんと共有してください。詳細は次のとおりです:
keydown、keyup、keypress: あなたに属するキーボードのキー
mousedown、mouseup: あなたに属するマウスボタン
ボタンが押されると、キーダウンイベントが発生します。
keyup ユーザーがキーを離すとトリガーされます。キーを押すプロセス全体は 2 つの部分に分かれています。1. キーが押される。2. キーが放される。
ユーザーがこの要素上でマウスボタンを押すと、マウスダウンが発生します
ユーザーがこの要素上でマウスボタンを放すと、マウスアップが発生します
例
1. どのマウスボタンがクリックされたか<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>2. マウスカーソルの現在の座標は何ですか
<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>3. 押されたキーのUnicodeコードは何ですか
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>4. 画面に対する現在のマウスカーソルの座標は何ですか
<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> 5. マウスカーソルの現在の座標は何ですか
<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>6. Shift キーは押されていますか
<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>7. 現在どの要素がクリックされていますか
<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>以上がこの記事の全内容です、皆さんの学習がお役に立てば幸いです。その他の関連コンテンツについては、PHP 中国語の Web サイトに注目してください。 関連おすすめ:
JS関数呼び出しスタックのスタックサイズの計算方法について以上がjsのマウスボタンイベントとキーボードボタンイベントの使用についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。