div實現繫結按鍵事件

2021-08-08 11:12:56 字數 654 閱讀 5126

問題背景

所有的頁面都會引用乙個公共js**庫base.js,在這個**庫里為document繫結了按鍵事件,現在需要為某個特殊的custom.html頁面定製事件handler。

解決思路

1. 作為js小白,首先想到的是在custom.html裡重新為按鍵繫結乙個customhandler來覆蓋原來的handler

$(document).keypress(customhandler);

測試的時候發現js並不會覆蓋,會先執行customhandler,再執行handler;

2. 找資料發現了乙個event.stoppropagation()可以停止事件傳播,寫進去發現不起作用,找到官方對這個函式的說明發現這個函式只能阻止元素的事件向上層元素傳播,由於這兩個處理器都繫結在document上,沒有上下級關係,所以沒起作用。

3. 那就製造上下級關係,把customhandler繫結在custom.html裡的乙個div元素上

$(「#divid」).bind("keypress",customhandler);

測試發現監聽不到按鍵事件,因為div元素沒法獲取焦點,但只要為div元素加上tabindex屬性就能獲取焦點

4. 測試發現div裡面的內容外面多了乙個邊框,非常難看,加上style="outline:none"後邊框消失。

繫結按鍵功能

給鍵盤上下左右繫結移動事件 document.onkeydown function k 以下 是2048小遊戲的一段 的功能是繫結上下左右鍵所要執行的功能,首先使用document.onkeydown給它賦予函式,函式的引數k表示乙個能夠處理按鍵的物件,通過這個物件.key來獲取按鍵輸入的值,按鍵輸...

jQuery事件中on實現繫結多個事件

相信大家都知道在jquery1.9版本中,已經去掉了live和delegate方法,從而將on方法的地位進一步提公升。jquery如此推崇on方法,必有其獨到的地方。所以我們就有必要了解這個on,並在 中利用它,從而優化 和提高效能。那麼接下來我們就來看看on的使用方法 語法結構 jq物件.on 事...

jquery on實現繫結多個事件

on events,selector data fn 概述 在選擇元素上繫結乙個或多個事件的事件處理函式。on 方法繫結事件處理程式到當前選定的jquery物件中的元素。在jquery 1.7中,on 方法 提供繫結事件處理程式所需的所有功能。幫助從舊的jquery事件方法轉換,see bind d...