js鼠標(biāo)按鍵事件和鍵盤(pán)按鍵事件用法實(shí)例匯總
本文實(shí)例講述了js鼠標(biāo)按鍵事件和鍵盤(pán)按鍵事件用法。分享給大家供大家參考,具體如下:
keydown,keyup,keypress:屬于你的鍵盤(pán)按鍵
mousedown,mouseup:屬于你的鼠標(biāo)按鍵
當(dāng)按鈕被按下時(shí),發(fā)生 keydown 事件,
keyup是在用戶(hù)將按鍵抬起的時(shí)候才會(huì)觸發(fā)的,
完整的 key press 過(guò)程分為兩個(gè)部分:1. 按鍵被按下;2. 按鍵被松開(kāi)。
當(dāng)用戶(hù)在這個(gè)元素上按下鼠標(biāo)鍵的時(shí)候,發(fā)生mousedown
當(dāng)用戶(hù)在這個(gè)元素上松開(kāi)鼠標(biāo)鍵的時(shí)候,發(fā)生mouseup
例子
1. 鼠標(biāo)的哪個(gè)按鍵被點(diǎn)擊
<html> <head> <script type="text/javascript"> function whichButton(event) { if (event.button==2) { alert("你點(diǎn)擊了鼠標(biāo)右鍵!") } else { alert("你點(diǎn)擊了鼠標(biāo)左鍵!") } } </script> </head> <body onmousedown="whichButton(event)"> <p>請(qǐng)單擊你鼠標(biāo)的左鍵或右鍵試試</p> </body> </html>
2. 當(dāng)前鼠標(biāo)的光標(biāo)坐標(biāo)是多少
<html> <head> <script type="text/javascript"> function show_coords(event) { x=event.clientX y=event.clientY alert("X 坐標(biāo): " + x + ", Y 坐標(biāo): " + y) } </script> </head> <body onmousedown="show_coords(event)"> <p>在此文檔中按下你鼠標(biāo)的左鍵看看!</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án)上的某個(gè)鍵看看</p> </body> </html>
4. 當(dāng)前鼠標(biāo)的光標(biāo)相對(duì)于屏幕的坐標(biāo)是多少
<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> 點(diǎn)擊你鼠標(biāo)的左鍵 </p> </body> </html>
5. 當(dāng)前鼠標(biāo)的光標(biāo)坐標(biāo)是多少
<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> 點(diǎn)擊你鼠標(biāo)的左鍵 </p> </body> </html>
6. shift鍵是否按下
<html> <head> <script type="text/javascript"> function isKeyPressed(event) { if (event.shiftKey==1) { alert("shit鍵按下了!") } else { alert("shit鍵沒(méi)有按下!") } } </script> </head> <body onmousedown="isKeyPressed(event)"> <p>按下shit鍵,點(diǎn)擊你鼠標(biāo)的左鍵</p> </body> </html>
7. 當(dāng)前被點(diǎn)擊的是哪一個(gè)元素
<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("你點(diǎn)擊了 " + tname + "元素") } </script> </head> <body onmousedown="whichElement(event)"> <p>在這里點(diǎn)擊看看,這里是p</p> <h3>或者點(diǎn)擊這里也可以呀,這里是h3</h3> <p>你想點(diǎn)我嗎??</p> <img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic"> </body> </html>
PS:這里再為大家提供一個(gè)關(guān)于JS事件的在線(xiàn)工具,歸納總結(jié)了JS常用的事件類(lèi)型與函數(shù)功能:
javascript事件與功能說(shuō)明大全:
http://tools.jb51.net/table/javascript_event
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript窗口操作與技巧匯總》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js中的鼠標(biāo)事件有哪些(用法示例學(xué)習(xí)進(jìn)階)
- js常用的鍵盤(pán)事件有哪些(用法示例)_鍵碼keyCode對(duì)照表
- JavaScript?鍵盤(pán)事件的處理及屬性詳解
- javascript 組合按鍵事件監(jiān)聽(tīng)實(shí)現(xiàn)代碼
- js捕捉鍵盤(pán)事件和按鍵鍵值的方法
- Atitit.js的鍵盤(pán)按鍵事件捆綁and事件調(diào)度
- JavaScript onkeypress事件入門(mén)實(shí)例(按下或按住一個(gè)鍵盤(pán)按鍵)
- JavaScript onkeydown事件入門(mén)實(shí)例(鍵盤(pán)某個(gè)按鍵被按下)
- js 事件截取enter按鍵頁(yè)面提交事件示例代碼
- javascript 按鍵事件(兼容各瀏覽器)
- js獲取鍵盤(pán)按鍵響應(yīng)事件(兼容各瀏覽器)
- JavaScript 監(jiān)聽(tīng)textarea中按鍵事件
- JavaScript中常見(jiàn)的事件用法小結(jié)
相關(guān)文章
layer插件實(shí)現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法
今天小編就為大家分享一篇layer插件實(shí)現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09js實(shí)現(xiàn)頁(yè)面打印功能實(shí)例代碼(附去頁(yè)眉頁(yè)腳功能代碼)
js實(shí)現(xiàn)頁(yè)面打印功能實(shí)例代碼(附去頁(yè)眉頁(yè)腳功能代碼)2009-12-12史上最全JavaScript常用的簡(jiǎn)寫(xiě)技巧(推薦)
這篇文章主要介紹了JavaScript常用的簡(jiǎn)寫(xiě)技巧,列舉了20條js中常用的簡(jiǎn)寫(xiě)技巧,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下2017-08-08Js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼時(shí)按鈕延遲操作
在做項(xiàng)目的時(shí)候,經(jīng)常遇到發(fā)短信驗(yàn)證碼的問(wèn)題,這時(shí)候需要用戶(hù)點(diǎn)完發(fā)送驗(yàn)證碼按鈕后,一段時(shí)間內(nèi)不能重復(fù)點(diǎn)擊,畢竟驗(yàn)證碼都是收費(fèi)的嘛,誰(shuí)都不想浪費(fèi),那么如何實(shí)現(xiàn)這種功能呢?下面來(lái)分享一下。2014-06-06TopList標(biāo)簽和JavaScript結(jié)合兩例
TopList標(biāo)簽和JavaScript結(jié)合兩例...2007-08-08JavaScript調(diào)用C語(yǔ)言的幾種方式
本文主要介紹了JavaScript調(diào)用C語(yǔ)言的幾種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02坐標(biāo)軸刻度取值算法之源于echarts的y軸刻度計(jì)算需求
坐標(biāo)軸刻度作為直角坐標(biāo)系中重要的組成部分,我們需要學(xué)會(huì)合理的設(shè)置坐標(biāo)軸的刻度,下面這篇文章主要給大家介紹了關(guān)于坐標(biāo)軸刻度取值算法之源于echarts的y軸刻度計(jì)算需求的相關(guān)資料,需要的朋友可以參考下2022-06-06原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JavaScript插件化開(kāi)發(fā)教程 (三)
前面我們學(xué)習(xí)了jQuery的方式開(kāi)發(fā)插件,講訴的都是些基礎(chǔ)的理論知識(shí),今天開(kāi)始,我們就來(lái)實(shí)戰(zhàn)一下,學(xué)習(xí)開(kāi)發(fā)自己的插件庫(kù)。2015-01-01