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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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中遍历stdclass object的实现代码
2011/06/09 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
js加解密 脚本解密
2008/02/22 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
pycharm安装和首次使用教程
2018/08/27 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python3中eval函数用法使用简介
2019/08/02 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
如何通过python实现全排列
2020/02/11 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
培训主管的职业生涯规划
2014/03/06 职场文书
军训拉歌口号
2014/06/13 职场文书
公司证明怎么写
2014/09/22 职场文书
2016七夕情人节广告语
2016/01/28 职场文书