Javascript:阻止浏览器默认右键事件,并显示定制内容
生活随笔
收集整理的這篇文章主要介紹了
Javascript:阻止浏览器默认右键事件,并显示定制内容
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在逛一些知名圖片社區(qū)的時(shí)候,遇到自己心怡的圖片,想要右鍵另存的時(shí)候,默認(rèn)的瀏覽器菜單不見了,卻出現(xiàn)了如:[?kevin版權(quán)所有]之類的信息;
今天在看Javascript事件默認(rèn)行為相關(guān)的知識(shí),所以,動(dòng)手實(shí)現(xiàn)了下類似效果:
鼠標(biāo)右鍵的時(shí)候,會(huì)出現(xiàn)如下所示的內(nèi)容
在線演示地址:http://codepen.io/anon/pen/xGyXVy
?
相關(guān)代碼:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>javascript:事件默認(rèn)行為</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">© kevin版權(quán)所有</div><script type="text/javascript">//oncontextmenu:右鍵菜單(環(huán)境菜單)顯示的時(shí)候觸發(fā),通過(guò)return false阻止默認(rèn)事件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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/kevinCoder/p/4675509.html
總結(jié)
以上是生活随笔為你收集整理的Javascript:阻止浏览器默认右键事件,并显示定制内容的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: Resin的安全性ip限制
- 下一篇: 使用js代码将HTML Table导出为