欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

Javascript:阻止浏览器默认右键事件，并显示定制内容

发布时间：2023/12/4 HTML 49 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Javascript:阻止浏览器默认右键事件，并显示定制内容 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

在逛一些知名图片社区的时候，遇到自己心怡的图片，想要右键另存的时候，默认的浏览器菜单不见了，却出现了如：[©kevin版权所有]之类的信息；

今天在看Javascript事件默认行为相关的知识，所以，动手实现了下类似效果：

鼠标右键的时候，会出现如下所示的内容

在线演示地址：http://codepen.io/anon/pen/xGyXVy

 

相关代码：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>javascript:事件默认行为</title><style type="text/css">#div1{display: none;position: absolute;padding: 6px 10px;color:#fff;border-radius: 3px;background-color: #666;}</style> </head> <body><div id="div1">&copy kevin版权所有</div><script type="text/javascript">//oncontextmenu:右键菜单(环境菜单)显示的时候触发，通过return false阻止默认事件var oDiv1=document.getElementById('div1');document.οncοntextmenu=function(ev){var ev=ev || event;var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;oDiv1.style.display='block'; oDiv1.style.left=ev.clientX +scrollTop+ 'px';oDiv1.style.top=ev.clientY +scrollTop+ 'px';return false;} </script></body> </html>

　　

 

转载于:https://www.cnblogs.com/kevinCoder/p/4675509.html

总结

以上是生活随笔为你收集整理的Javascript:阻止浏览器默认右键事件，并显示定制内容的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。