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

前端之家收集整理的这篇文章主要介绍了jQuery自定义元素右键点击事件(实现案例)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

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

完整代码