使用 Mousestrap 阻止瀏覽器默認(rèn)快捷鍵

lauren_liuling 發(fā)布于2019-08-22 10:56 / 2450人閱讀

摘要：在中有時(shí)候會(huì)使用一些比較方便的快捷鍵，像這些。這里介紹一個(gè)非常實(shí)用的工具可以用來(lái)捕獲任何快捷鍵，在以后的中可以用它來(lái)捕獲捕獲快捷鍵。下面簡(jiǎn)單列幾個(gè)來(lái)自的教程示例監(jiān)聽(tīng)單個(gè)按鍵監(jiān)聽(tīng)按鍵組合同時(shí)監(jiān)聽(tīng)多個(gè)

在 web app 中有時(shí)候會(huì)使用一些比較方便的快捷鍵，像 ctrl ＋ s、ctrl + f 這些。這里介紹一個(gè)非常實(shí)用的工具Mousestrap可以用來(lái)捕獲任何快捷鍵，在以后的 web app 中可以用它來(lái)捕獲捕獲快捷鍵。

下面簡(jiǎn)單列幾個(gè)來(lái)自Tut 的教程示例：

監(jiān)聽(tīng)單個(gè)按鍵

Mousetrap.bind("7", function() { // callback });
Mousetrap.bind("/", function() { // callback });
Mousetrap.bind("esc", function() { // callback });

監(jiān)聽(tīng)按鍵組合

Mousetrap.bind("command+s", function(){ // callback });

同時(shí)監(jiān)聽(tīng)多個(gè)

Mousetrap.bind(["command+s", "ctrl+s"], function() {
  console.log("command + k or control + k");
  showBalloon("Command + K or Control + K");
  return false;
});

GPU云服務(wù)器云服務(wù)器 js阻止默認(rèn)點(diǎn)擊事件修改默認(rèn)快捷鍵瀏覽器默認(rèn)事件如何更改默認(rèn)瀏覽器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91479.html

相關(guān)文章

從0開(kāi)始構(gòu)建自己的前端知識(shí)體系-JS-事件-鍵盤(pán)事件總結(jié)

摘要：在探尋的過(guò)程中發(fā)現(xiàn)自己對(duì)鍵盤(pán)輸入事件的理解還并不到位，以至于有一些代碼看得云里霧里，趕緊查閱資料寫(xiě)寫(xiě)總結(jié)一下下文所說(shuō)只在與里做了探究。短按觸發(fā)順序長(zhǎng)按觸發(fā)順序循環(huán)事件阻止冒泡這類事件都會(huì)冒泡，阻止按照常規(guī)調(diào)用接口就可以阻止冒泡了。前言最近因一個(gè)需求在element-ui的Select組件文檔內(nèi)找不到對(duì)應(yīng)的示例，也就是filter-method方法的具體使用樣例，嘗試幾次之后也使用了...

Anonymous1 2019-08-22 15:55 評(píng)論0 收藏0
【Electron】酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享 — 入坑篇

摘要：系列文章酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享入坑篇酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享軟件自動(dòng)更新酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享瀏覽器啟動(dòng)客戶端酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享進(jìn)程通信酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。作者：鐘離，酷家樂(lè)PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

jay_tian 2019-08-02 15:16 評(píng)論0 收藏0
【Electron】酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享 — 入坑篇

摘要：系列文章酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享入坑篇酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享軟件自動(dòng)更新酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享瀏覽器啟動(dòng)客戶端酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享進(jìn)程通信酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。作者：鐘離，酷家樂(lè)PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

TwIStOy 2019-08-23 18:05 評(píng)論0 收藏0
jQuery 事件(三) 事件的綁定和解綁、對(duì)象的使用、自定義事件

摘要：事件的綁定和解綁的多事件綁定之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤(pán)事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類事件都是屬于快捷處理。由于瀏覽器事件冒泡特性，可以在觸發(fā)時(shí)把這個(gè)事件往上冒泡到上，因?yàn)樯辖壎ㄊ录憫?yīng)，所以能觸發(fā)這個(gè)動(dòng)作。事件的綁定和解綁 on()的多事件綁定之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤(pán)事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類事件都是屬于快捷處理...

niuxiaowei111 2019-08-22 10:53 評(píng)論0 收藏0
JQuery基礎(chǔ)修煉-事件篇

摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤(pán)事件第章事件的綁定和解綁第章事件對(duì)象的使用第章自定義事件與事件用交互操作中，最簡(jiǎn)單直接就是點(diǎn)擊操作。提供了兩個(gè)方法一個(gè)是方法用于監(jiān)聽(tīng)用戶單擊操作，另一個(gè)方法是方法用于監(jiān)聽(tīng)用戶雙擊操作。目錄第1章事件介紹第2章鼠標(biāo)事件第3章表單事件第4章鍵盤(pán)事件第5章事件的綁定和解綁第6章事件對(duì)象的使用第7章自定義事件 cli...

yy13818512006 2019-08-02 15:55 評(píng)論0 收藏0