jQuery自定义元素右键点击事件(实现案例)

2019-11-19 16:42:27

字体：大中小

来源：转载

供稿：网友

大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。

第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。

首先要将阻止弹出函数绑定到目标元素上：

//阻止浏览器默认右键点击事件$("div").bind("contextmenu", function(){  return false;})

如此一来，div元素的右击事件就被屏蔽了，而浏览器其他区域不受影响，如果你想在整个页面屏蔽右击事件，只需这样做：

document.oncontextmenu = 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"    });  }})

示例效果为右击字体缩小，左击字体变大，且其它区域可以响应默认右击事件。

完整代码：

<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自定义元素右键点击事件(实现案例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：JS实现动态添加DOM节点和事件的方法示例

下一篇：详解angularJs模块ui-router之状态嵌套和视图嵌套