當前位置:網站首頁>常用的鼠標事件和鍵盤事件

常用的鼠標事件和鍵盤事件

2022-07-23 13:48:06抱抱旋旋子

常用鼠標事件

一.禁止選中文字和禁止右鍵菜單

 1.禁止鼠標右鍵菜單
contextmenu主要控制應該何時顯示上下文菜單,主要用於程序員取消默認的上下文菜單

2.禁止鼠標選中( selectstart開始選中)

 

 例子:

 二.獲得鼠標在頁面中的坐標

鼠標事件對象

event對象代錶事件的狀態,跟事件相關的一系列信息的集合。現階段我們主要是用鼠標事件對象MouseEvent和鍵盤事件對象KeyboardEvent

例子: 

 三.跟隨鼠標的天使

案例分析:

1.鼠標不斷的移動,使用鼠標移動事件:  mousemove在頁面中移動,給document注册事件
2.圖片要移動距離,而且不占比特置,我們使用絕對定比特即可
3.核心原理:每次鼠標移動,我們都會獲得最新的鼠標坐標,把這個x和y坐標做為圖片的top和left值就可以移動圖片

常見的鍵盤事件

 注意:
1.如果使用addEventListener不需要加on

2. onkeypress和前面2個的區別是,它不識別功能鍵,比如左右箭頭,shift等。

3.三個事件的執行順序是:keydown -- keypress --- keyup

 四.keyCode判斷用戶按下哪個鍵

注意:

onkeydown和onkeyup 不區分字母大小寫,onkeypress區分字母大小寫。在我們實際開發中,我們更多的使用keydown和keyup,它能識別所有的鍵(包括功能鍵)Keypress不識別功能鍵,但是keyCode屬性能區分大小寫,返回不同的ASCII值

五.模擬京東按鍵輸入內容

1.快遞單號輸入內容時,上面的大號字體盒子(con)顯示(這裏面的文字

2.同時把快遞單號裏面的值( value )獲取過來賦值給con盒子( innerText )做為內容

3.如果快遞單號裏面內容為空,則隱藏大號字體盒了(con)盒子

4.注意::keydown和keypress在文本框裏面的特點∶他們兩個事件觸發的時候,文字還沒有落入文本框中

5.keyup事件觸發的時候,文字已經落入文本框裏面了

6.當我們失去焦點,就隱藏這個con盒子

7.當我們獲得焦點,並且文本框內容不為空,就顯示這個con盒子

 

版權聲明
本文為[抱抱旋旋子]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/204/202207230706335172.html

隨機推薦