jQuery自定義元素右鍵點擊事件(實現(xiàn)案例)

更新時間：2017年04月28日 09:44:18 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query自定義元素右鍵點擊事件(實現(xiàn)案例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

大多數(shù)情況下我們使用左鍵來進行頁面交互，而右鍵大部分對于開發(fā)者來說是審查元素的，有的時候我們也要自定義鼠標右鍵點擊行為來達到更好的交互性，常見的有漫畫左鍵前進、右鍵后退。

第一步我們要屏蔽瀏覽器默認的右鍵點擊行為，即阻止彈出框。

首先要將阻止彈出函數(shù)綁定到目標元素上：

//阻止瀏覽器默認右鍵點擊事件
$("div").bind("contextmenu", function(){
  return false;
})

如此一來，div元素的右擊事件就被屏蔽了，而瀏覽器其他區(qū)域不受影響，如果你想在整個頁面屏蔽右擊事件，只需這樣做：

document.oncontextmenu = function() {
  return false;
}

接下來就可以為元素綁定右擊響應函數(shù)了：

$("div").mousedown(function(e) {
  console.log(e.which);
  //右鍵為3
  if (3 == e.which) {
    $(this).css({
      "font-size": "-=2px"
    });
  } else if (1 == e.which) {
    //左鍵為1
    $(this).css({
      "font-size": "+=3px"
    });
  }
})

示例效果為右擊字體縮小，左擊字體變大，且其它區(qū)域可以響應默認右擊事件。

完整代碼：

<head>
  <style type="text/css">
  div{
    font-size:20px;
  }
  </style>
  <script src="../jquery.js"></script>
  <script>
  $(function() {
    //阻止瀏覽器默認右鍵點擊事件
    /*document.oncontextmenu = function() {
      return false;
    }*/
    //某元素組織右鍵點擊事件
    $("div").bind("contextmenu", function(){
      return false;
    })
    $("div").mousedown(function(e) {
      console.log(e.which);
      //右鍵為3
      if (3 == e.which) {
        $(this).css({
          "font-size": "-=2px"
        });
      } else if (1 == e.which) {
        //左鍵為1
        $(this).css({
          "font-size": "+=3px"
        });
      }
    })
  })
  </script>
</head>

<body>
  <div>
    div
  </div>
</body>

以上這篇jQuery自定義元素右鍵點擊事件(實現(xiàn)案例)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

jquery限定文本框只能輸入數(shù)字即整數(shù)和小數(shù)
限定文本框只能輸入數(shù)字即整數(shù)和小數(shù)，在某些特殊情況下還是比較實用的，下面有個不錯的示例，通過jquery來簡單實現(xiàn)下
2013-11-11
40款非常棒的jQuery 插件和制作教程（系列二）
jQuery 在現(xiàn)在的 Web 開發(fā)項目中扮演著重要角色，jQuery 讓網(wǎng)站有更好的可用性和用戶體驗，讓訪問者對網(wǎng)站留下非常好的印象
2011-11-11
常見的jQuery選擇器匯總
本文匯總介紹了常見的jQuery選擇器知識，包含基本元素選擇器、分層選擇器、基本條件選擇器、內(nèi)容條件選擇器、可見性條件選擇器、屬性選擇器、子元素選擇器、表單元素選擇器、表單屬性選擇器。十分的詳盡，有需要的小伙伴參考下吧
2014-11-11
jQuery實現(xiàn)的響應鼠標移動方向插件用法示例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的響應鼠標移動方向插件用法,涉及jQuery響應鼠標事件及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2018-08-08
jQuery實現(xiàn)滾動到底部時自動加載更多的方法示例
這篇文章主要介紹了jQuery實現(xiàn)滾動到底部時自動加載更多的方法,涉及jQuery基于ajax動態(tài)操作頁面元素相關實現(xiàn)技巧,需要的朋友可以參考下
2018-02-02
jquery操作select詳解(取值,設置選中)
本篇文章主要是對jquery操作select(取值,設置選中)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
jQuery用noConflict代替$的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query用noConflict代替$的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
jquery+正則實現(xiàn)統(tǒng)一的表單驗證
表單驗證一直很繁瑣，特別是大點的表單，如果每個input都去單獨寫驗證簡直要寫死人，最近寫了一小段js統(tǒng)一的驗證表單內(nèi)容是否正確。需要的朋友可以參考下
2015-09-09
jQuery鼠標事件匯總
鼠標事件是指用戶在移動鼠標光標或者點擊任意鼠標鍵時觸發(fā)的事件,jQuery中封裝了基本上所有的鼠標事件包括點擊,雙擊,移動等鼠標事件,下面我們就來看下這些事件的語法和用法
2015-08-08
jquery對復選框(checkbox)的操作匯總
本文給大家匯總介紹了一些jQuery操作復選框（checkbox）的方法和技巧，非常的簡單實用，有需要的小伙伴可以參考下。
2016-01-01