jQuery自定义元素右键点击事件(实现案例)
更新时间：2017年04月28日 09:44:18 投稿：jingxian
下面小编就为大家带来一篇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来简单实现下2013-11-11
jQuery 在现在的 Web 开发项目中扮演着重要角色，jQuery 让网站有更好的可用性和用户体验，让访问者对网站留下非常好的印象2011-11-11
本文汇总介绍了常见的jQuery选择器知识，包含基本元素选择器、分层选择器、基本条件选择器、内容条件选择器、可见性条件选择器、属性选择器、子元素选择器、表单元素选择器、表单属性选择器。十分的详尽，有需要的小伙伴参考下吧2014-11-11
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
这篇文章主要介绍了jQuery实现的响应鼠标移动方向插件用法,涉及jQuery响应鼠标事件及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了jQuery实现滚动到底部时自动加载更多的方法,涉及jQuery基于ajax动态操作页面元素相关实现技巧,需要的朋友可以参考下2018-02-02
本篇文章主要是对jquery操作select(取值,设置选中)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
下面小编就为大家带来一篇jQuery用noConflict代替$的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
表单验证一直很繁琐，特别是大点的表单，如果每个input都去单独写验证简直要写死人，最近写了一小段js统一的验证表单内容是否正确。需要的朋友可以参考下2015-09-09
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法2015-08-08
本文给大家汇总介绍了一些jQuery操作复选框（checkbox）的方法和技巧，非常的简单实用，有需要的小伙伴可以参考下。2016-01-01
最新评论