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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现简单评论功能
Aug 19 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
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
万能的php分页类
2017/07/06 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
js Dialog 实践分享
2012/10/22 Javascript
浅析node.js中close事件
2014/11/26 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
常用jQuery代码分享
2015/07/14 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python的等深分箱实例
2019/11/22 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
Python如何批量生成和调用变量
2020/11/21 Python
雅虎笔试题(字符串操作)
2015/03/24 面试题
中专生自我鉴定范文
2013/12/19 职场文书
新员工欢迎词
2014/01/12 职场文书
教育技术职业规划范文
2014/03/04 职场文书
支部鉴定材料
2014/06/02 职场文书
授权委托书格式
2014/07/31 职场文书
党委领导班子整改方案
2014/09/30 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python