欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年04月28日 09:44:18   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇jQuery自定義元素右鍵點(diǎn)擊事件(實(shí)現(xiàn)案例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

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

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

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

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

接下來(lái)就可以為元素綁定右擊響應(yīng)函數(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ū)域可以響應(yīng)默認(rèn)右擊事件。

完整代碼：

<head>
  <style type="text/css">
  div{
    font-size:20px;
  }
  </style>
  <script src="../jquery.js"></script>
  <script>
  $(function() {
    //阻止瀏覽器默認(rèn)右鍵點(diǎn)擊事件
    /*document.oncontextmenu = function() {
      return false;
    }*/
    //某元素組織右鍵點(diǎn)擊事件
    $("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自定義元素右鍵點(diǎn)擊事件(實(shí)現(xiàn)案例)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • jquery限定文本框只能輸入數(shù)字即整數(shù)和小數(shù)

    jquery限定文本框只能輸入數(shù)字即整數(shù)和小數(shù)

    限定文本框只能輸入數(shù)字即整數(shù)和小數(shù)，在某些特殊情況下還是比較實(shí)用的，下面有個(gè)不錯(cuò)的示例，通過(guò)jquery來(lái)簡(jiǎn)單實(shí)現(xiàn)下
    2013-11-11
  • 40款非常棒的jQuery 插件和制作教程（系列二）

    40款非常棒的jQuery 插件和制作教程（系列二）

    jQuery 在現(xiàn)在的 Web 開發(fā)項(xiàng)目中扮演著重要角色，jQuery 讓網(wǎng)站有更好的可用性和用戶體驗(yàn)，讓訪問(wèn)者對(duì)網(wǎng)站留下非常好的印象
    2011-11-11
  • 常見的jQuery選擇器匯總

    常見的jQuery選擇器匯總

    本文匯總介紹了常見的jQuery選擇器知識(shí)，包含基本元素選擇器、分層選擇器、基本條件選擇器、內(nèi)容條件選擇器、可見性條件選擇器、屬性選擇器、子元素選擇器、表單元素選擇器、表單屬性選擇器。十分的詳盡，有需要的小伙伴參考下吧
    2014-11-11
  • jQuery實(shí)現(xiàn)的響應(yīng)鼠標(biāo)移動(dòng)方向插件用法示例【附源碼下載】

    jQuery實(shí)現(xiàn)的響應(yīng)鼠標(biāo)移動(dòng)方向插件用法示例【附源碼下載】

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的響應(yīng)鼠標(biāo)移動(dòng)方向插件用法,涉及jQuery響應(yīng)鼠標(biāo)事件及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2018-08-08
  • jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法示例

    jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法,涉及jQuery基于ajax動(dòng)態(tài)操作頁(yè)面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2018-02-02
  • jquery操作select詳解(取值,設(shè)置選中)

    jquery操作select詳解(取值,設(shè)置選中)

    本篇文章主要是對(duì)jquery操作select(取值,設(shè)置選中)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2014-02-02
  • jQuery用noConflict代替$的實(shí)現(xiàn)方法

    jQuery用noConflict代替$的實(shí)現(xiàn)方法

    下面小編就為大家?guī)?lái)一篇jQuery用noConflict代替$的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-04-04
  • jquery+正則實(shí)現(xiàn)統(tǒng)一的表單驗(yàn)證

    jquery+正則實(shí)現(xiàn)統(tǒng)一的表單驗(yàn)證

    表單驗(yàn)證一直很繁瑣，特別是大點(diǎn)的表單，如果每個(gè)input都去單獨(dú)寫驗(yàn)證簡(jiǎn)直要寫死人，最近寫了一小段js統(tǒng)一的驗(yàn)證表單內(nèi)容是否正確。需要的朋友可以參考下
    2015-09-09
  • jQuery鼠標(biāo)事件匯總

    jQuery鼠標(biāo)事件匯總

    鼠標(biāo)事件是指用戶在移動(dòng)鼠標(biāo)光標(biāo)或者點(diǎn)擊任意鼠標(biāo)鍵時(shí)觸發(fā)的事件,jQuery中封裝了基本上所有的鼠標(biāo)事件包括點(diǎn)擊,雙擊,移動(dòng)等鼠標(biāo)事件,下面我們就來(lái)看下這些事件的語(yǔ)法和用法
    2015-08-08
  • jquery對(duì)復(fù)選框(checkbox)的操作匯總

    jquery對(duì)復(fù)選框(checkbox)的操作匯總

    本文給大家匯總介紹了一些jQuery操作復(fù)選框（checkbox）的方法和技巧，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
    2016-01-01

最新評(píng)論