jQuery自定义元素右键点击事件
来源:互联网 发布:淘宝龟苓膏有假的吗 编辑:程序博客网 时间:2024/06/06 14:23
大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进、右键后退。
第一步我们要屏蔽浏览器默认的右键点击行为,即阻止弹出框。
首先要将阻止弹出函数绑定到目标元素上:
//阻止浏览器默认右键点击事件$("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>
此文档的作者:justforuse
Github Pages:justforuse
0 0
- jQuery自定义元素右键点击事件
- jQuery自定义元素右键点击事件
- jquery-smartMenu 鼠标右键点击事件
- jquery 点击 触发上一元素 事件
- 捕获鼠标点击事件 做自定义右键菜单
- JS右键点击事件
- JS右键点击事件
- 如何实现jquery自定义点击右键菜单显示
- jQuery 绑定点击事件执行自定义函数
- jQuery获取绑定自定义事件的元素
- Jquery实现点击子元素标签只触发子元素点击事件,不触发父元素点击事件
- jquery注册右键事件
- 2,JQuery学习-为页面的元素添加点击事件
- jquery用 bind 函数给元素绑定点击事件
- jquery为动态生成的元素添加点击事件
- jquery实现点击某元素之外触发事件
- jquery为动态生成元素添加点击事件
- JQuery给动态生成的DOM元素绑定点击事件
- class文件中的访问标志、类索引、父类索引、接口索引集合
- 第一行代码:隐式Intent
- PHP中的进制
- 我的Python第四篇 字典与集合篇
- Tomcat学习之虚拟目录
- jQuery自定义元素右键点击事件
- class文件中的字段表集合--field字段在class文件中是怎样组织的
- struts2.x入门实例
- class文件中的方法表集合--method方法在class文件中是怎样组织的
- eclipse安装maven插件问题总结
- 关于深户办理户口本和身份证的总结
- 数据结构-不相交集ADT
- Linux 字符集设置
- leetcode 299. Bulls and Cows