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

# jquery # 自定义右键点击事件 # jQuery中复合属性选择器用法实例 # jQuery 复合选择器应用的几个例子 # jQuery简单绑定单个事件的方法示例 # 解决jQuery ajax动态新增节点无法触发点击事件的问题 # jQuery动态追加页面数据以及事件委托详解 # jquery事件与绑定事件 # jquery中绑定事件的异同 # jQuery中绑定事件bind() on() live() one()的异同 # JQuery 绑定select标签的onchange事件 # 弹出选择的值 # 并实现跳转、传参 # JQuery触发radio或checkbox的change事件 # jquery移除、绑定、触发元素事件使用示例详解 # jQuery复合事件用法示例 # 右键点击 # 右键 # 右击 # 左键 # 给大家 # 弹出 # 自定义 # 绑定 # 鼠标 # 也要 # 只需 # 你想 # 希望能 # 不受 # 这样做 # 就可 # 要将 # 这篇 # 小编 # 变大

返回目录在线咨询

上一篇：Python中通过Mixin模式优化多继承场景下的代码复用
下一篇：宝塔面板建站后服务器IP能访问，但域名不能访问如何解决？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求