jQuery自定义元素右键点击事件(实现案例)

 我来答

1个回答

#热议# 什么是淋病？哪些行为会感染淋病？

曾蕊公新烟
2020-01-26 · TA获得超过3641个赞

知道大有可为答主

回答量：3104

采纳率：24%

帮助的人：207万

我也去答题访问个人页

关注

展开全部

大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。
第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。
首先要将阻止弹出函数绑定到目标元素上：
//阻止浏览器默认右键点击事件
$("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自定义元素右键点击事件(实现案例)

为你推荐：