我们经常用鼠标在桌面上点来点去的,你是否知道,网页的鼠标右键的菜单也是可以自定义的,你还在为了网页源码禁止别人F12,或者鼠标右键,你可以试试自定义鼠标右键,将你网站的功能添加到鼠标右键,默认的右键功能会被取消,这样不是解决了防止代码被复制粘贴的事件发生。

1.实现原理

js中oncontextmenu事件和jquery中contextmenu都可以对鼠标右键进行自定义菜单,实际上就是监听鼠标右键点击事件,然后将事先设计好的右键菜单绑定到右键事件上,并在当前位置显示出来,最后再阻止右键的默认事件!

2.案例代码

<style type="text/css">
.txt{width: 120px;height: auto;background: #ddd;color: #fff;text-align: center;line-height: 40px;border-radius: 3px;position: relative;display: none;}
.txt p{border-bottom: 1px solid #ccc;}
</style>

<div class="txt"> 
<p>右键事件一</p>
<p>右键事件二</p>
<p>右键事件三</p>
</div>

<script>
var txt = document.getElementsByClassName("txt")[0];
document.oncontextmenu = function(){
var event = event || window.event;
txt.style= "top:"+event.clientY+"px;left:"+event.clientX+"px;display:block";
return false;
}
</script>

特别注意:通过这样自定义鼠标右键功能菜单可以,需要兼容四周边界效果,否则出现被隐藏,页面出现滚动轴等异常现象!jQuery的方法请参照jquery的contextmenu事件