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

网络编程 2021-07-04 18:32www.168986.cn编程入门

狼蚁网站SEO优化长沙网络推广就为大家带来一篇jQuery自定义元素右键点击事件(实现案例)。长沙网络推广觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧

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

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

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

//阻止浏览器默认右键点击事件
$("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自定义元素右键点击事件(实现案例)就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：JS实现动态添加DOM节点和事件的方法示例下一篇：详解angularJs模块ui-router之状态嵌套和视图嵌套

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设