jQuery自定义元素右键点击事件
程序员文章站
2022-03-05 20:49:19
...
本文主要就为大家带来一篇jQuery自定义元素右键点击事件(实现案例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。
第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。
首先要将阻止弹出函数绑定到目标元素上：
//阻止浏览器默认右键点击事件
$("p").bind("contextmenu", function(){
return false;
})
如此一来，p元素的右击事件就被屏蔽了，而浏览器其他区域不受影响，如果你想在整个页面屏蔽右击事件，只需这样做：
document.oncontextmenu = function() {
return false;
}
接下来就可以为元素绑定右击响应函数了：
$("p").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">
p{
font-size:20px;
}
</style>
<script src="../jquery.js"></script>
<script>
$(function() {
//阻止浏览器默认右键点击事件
/*document.oncontextmenu = function() {
return false;
}*/
//某元素组织右键点击事件
$("p").bind("contextmenu", function(){
return false;
})
$("p").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>
<p>
p
</p>
</body>
相关推荐：
以上就是jQuery自定义元素右键点击事件的详细内容，更多请关注其它相关文章！
上一篇： 教你一招纯HTML制作个人简历
下一篇： html的块元素有哪些