微客导航 » 文章资讯 » jQuery自定义元素右键点击事件(实现案例)

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

2024-02-24 19:59:04 147

大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。

第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。

首先要将阻止弹出函数绑定到目标元素上：

//阻止浏览器默认右键点击事件
$("div").bind("contextmenu",function(){
returnfalse;
})

如此一来，div元素的右击事件就被屏蔽了，而浏览器其他区域不受影响，如果你想在整个页面屏蔽右击事件，只需这样做：

document.oncontextmenu=function(){
returnfalse;
}

接下来就可以为元素绑定右击响应函数了：

$("div").mousedown(function(e){
console.log(e.which);
//右键为3
if(3==e.which){
$(this).css({
"font-size":"-=2px"
});
}elseif(1==e.which){
//左键为1
$(this).css({
"font-size":"+=3px"
});
}
})

示例效果为右击字体缩小，左击字体变大，且其它区域可以响应默认右击事件。

完整代码：



div{
font-size:20px;
}







div

以上这篇jQuery自定义元素右键点击事件(实现案例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐