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


Posted in jQuery onApril 28, 2017

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

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

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

//阻止浏览器默认右键点击事件
$("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获取radio选中的值
May 05 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 #jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
You might like
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python画图的函数用法以及技巧
2019/06/28 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
2014年党课学习心得体会
2014/07/08 职场文书
母亲节感言
2015/08/03 职场文书
美容院管理规章制度
2015/08/05 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
入党申请书格式
2019/06/20 职场文书
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android