AI编程助手
AI免费问答

Javascript实现鼠标右键自定义特色菜单

巴扎黑   2017-09-06 10:19   2185浏览 原创

js屏蔽鼠标右键的两种方法,比较常用的一个js小功能,用上这个代码后,浏览者在访问你网页的时候就不能点击右键了,点了也不会弹出右键菜单,本功能最好不要用的太多哦,有时候用户会反感的。

代码如下:


<title>屏蔽鼠标右键</title>
第一种方法:在body标签里加上oncontextmenu=self.event.returnvalue=false;
<br><script>
<!--
function document.oncontextmenu()
{
return false;
}


function nocontextmenu()
{
if(document.all) {
event.cancelBubble=true;
event.returnvalue=false;
return false;
}
}
-->
</script>
第二种方法:在body里加入onmousedown="rclick()" oncontextmenu= "nocontextmenu()"
<br><script>
<!--
function rclick()
{
if(document.all) {
if (event.button == 2){
event.returnvalue=false;
}
}
}
-->
</script><br>详细情况请查看代码。<br><br>现在点击你的鼠标右键,不起作用了。

以上就是本文的全部内容,希望对大家的学习有所帮助。

,两种JS实现屏蔽鼠标右键的方法,
"

在Web端,通常是不需要右键菜单,各个浏览器也有自己的右键菜单。但是对于一些特殊的网页,是需要右键菜单来增加用户体验的,比如百度音乐,QQ邮箱,相信大家都在Web端使用过右键菜单了,现在来分享一下如何实现,比较简单。

运行代码:

window.onload = function() {
      document.oncontextmenu = block;
      document.body.onmouseup = function(event) {
        if (!event) event = window.event;
        if (event.button == 2) {
          var x = event.pageX || event.clientX;
          var y = event.pageY || event.clientY;
          document.getElementById("contextMenu").style.left = x  "px";
          document.getElementById("contextMenu").style.top = y  "px";
          document.getElementById("contextMenu").style.display = "block";
        }
      }
      //阻止事件冒泡
      document.getElementById("contextMenu").onclick = function(event) {
        event.stopPropagation();
      }
      //点击其他地方隐藏
      document.onclick = function() {
        document.getElementById("contextMenu").style.display = "none";
      }
      for (var i = 0; i <p><strong>效果图:</strong></p><p style="text-align: center;"><img id="theimg" src="https://img.php.cn/upload/article/000/000/007/e4417a6b899965341cc44f28a0a99870-0.png?x-oss-process=image/resize,p_40" alt=""></p>

Java免费学习笔记:立即学习
解锁 Java 大师之旅:从入门到精通的终极指南

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。