首頁 > web前端 > js教程 > 主體

關於js滑鼠按鍵事件和鍵盤按鍵事件的使用方法

不言
發布: 2018-06-30 11:26:22
原創
1602 人瀏覽過

這篇文章主要介紹了js滑鼠按鍵事件和鍵盤按鍵事件用法,結合實例形式總結分析了JavaScript針對滑鼠與鍵盤事件的常用操作技巧,需要的朋友可以參考下

本文實例講述了js滑鼠按鍵事件和鍵盤按鍵事件用法。分享給大家供大家參考,具體如下:

keydown,keyup,keypress:屬於你的鍵盤按鍵

mousedown,mouseup:屬於你的滑鼠按鍵

#當按鈕被按下時,發生keydown 事件,

keyup是在使用者將按鍵抬起的時候才會觸發的,

完整的key press 過程分為兩個部分:1. 按鍵被按下;2. 按鍵被放開。

當使用者在這個元素上按下滑鼠鍵的時候,發生mousedown

當使用者在這個元素上放開滑鼠鍵的時候,發生mouseup

範例

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中文網!

相關推薦:

關於JS的函數呼叫堆疊stack size的計算方法

JavaScript圖片放大技術的實作

以上是關於js滑鼠按鍵事件和鍵盤按鍵事件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板