www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

JavaScript模拟鼠标右键菜单功效,二种JS完成屏蔽

2019-07-12 10:21 来源:未知

正文实例为大家大快朵颐了JavaScript模拟鼠标右键菜单的实际代码,供我们参谋,具体代码如下
效果图:

本文实例叙述了js剖断鼠标左、中、右键哪个被点击的主意。分享给我们供我们参谋。具体贯彻格局如下:

JS屏蔽鼠标右键的三种艺术,比较常用的三个JS小功用,用上那些代码后,浏览者在拜见你网页的时候就不能够点击右键了,点了也不会弹出右键菜单,本作用最佳不用用的太多啊,有的时候候用户会厌倦的。

图片 1

复制代码 代码如下:

代码如下:

实际代码:

<html>
<head>
<title>js推断鼠标左、中、右键哪个被点击-柯乐义</title>
<script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
{
alert("您点击了鼠标右键!")
}
else if(btnNum==0)
{
alert("您点击了鼠标左键!")
}
else if(btnNum==1)
{
alert("您点击了鼠标中键!");
}
else
{
alert("您点击了" btnNum "号键,笔者无法分明它的称号。");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请在文档中式点心击鼠标。一个音信框会提醒出您点击了哪位鼠标按钮。</p>
</body>
</html>

<html>
<head>
<title>屏蔽鼠标右键</title>
</head>
<body oncontextmenu=self.event.returnvalue=false>
第一种方法:在body标签里加上oncontextmenu=self.event.returnvalue=false;
<br>
<script language="javascript">
<!--
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 language="javascript">
<!--
function rclick()
{
if(document.all) {
if (event.button == 2){
event.returnvalue=false;
}
}
}
-->
</script>
<br>详细情况请查看代码。<br>
<br>现在点击你的鼠标右键,不起作用了。
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>右键菜单</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #menu{
      width: 254px;
      /*background-color: #ccc;*/
      font-size: 12px;
      position: fixed;
      top: 0px;
      left: 0px;
      /*height: 240px;*/
      /*padding-left: 26px;*/
      padding-top: 2px;
      border:1px solid #ccc;
      display: none;
    }
    #menu li{
      list-style: none;
      line-height: 25px;
      margin-left: -1px;
      padding-left: 26px;
    }
    #menu li:hover{
      background-color: #4281f4;
      color: #fff;
    }
  </style>
</head>
<body>
   <ul id="menu">
     <li>返回(B)</li>
     <li>前进(F)</li>
     <li>从新加载(R)</li>
     <li>另存为(A)</li>
     <li>打印(P)</li>
     <li>查看网页源代码(V)</li>
     <li>查看网页信息(I)</li>
     <li>审查元素(N)</li>
   </ul>
   <script type="text/javascript">
    var menu = document.getElementById("menu");

    document.oncontextmenu =function(e){
      var e = e ||window.event;//兼容
     console.log(e.clientX,e.clientY);
     console.log(e);
     //单击显示div
     menu.style.display = "block";
     //设置定义
     //判断鼠标坐标是否大于视口宽度-块本身宽度
     var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth)?(document.documentElement.clientWidth - menu.offsetWidth):e.clientX;
     var cakTop = (e.clientY > document.documentElement.clientHeight - menu.offsetHeight)?(document.documentElement.clientHeight - menu.offsetHeight):e.clientY;
     menu.style.left = cakLeft   "px";
     menu.style.top = cakTop   "px";

    return false;
    }

      menu.onclick = function(e) {
    var e = e || window.event;
    e.cancelBubble = true;
    //阻止冒泡。
  }
   document.onclick = function() {
    menu.style.display = "none";
  }

   </script>
</body>
</html>

指望本文所述对大家的javascript程序设计有所辅助。

如上正是本文的全部内容,希望对大家的读书抱有援救。

但愿本文所述对我们学习javascript程序设计有着扶助。

您只怕感兴趣的稿子:

  • JavaScript模拟鼠标右键菜单成效
  • javascript鼠标右键菜单自定义效果
  • 三种JS完成屏蔽鼠标右键的格局
  • Javascript兑现鼠标右键特色菜单
  • js完成完全自定义可带多级目录的网页鼠标右键菜单方法
  • JS 获取鼠标左右键的键值方法
  • javascript兑以后有个别成分上堵住鼠标右键事件的不二等秘书技和实例
  • js自定义鼠标右键的兑现原理及源码
  • JavaScript鼠标事件,点击鼠标右键,弹出div的简练实例

您也许感兴趣的文章:

  • JavaScript模拟鼠标右键菜单效用
  • javascript鼠标右键菜单自定义效果
  • Javascript完成鼠标右键特色菜单
  • js完结完全自定义可带多级目录的网页鼠标右键菜单方法
  • js推断鼠标左、中、右键哪个被点击的措施
  • JS 获取鼠标左右键的键值方法
  • javascript贯彻在有些成分上堵住鼠标右键事件的法子和实例
  • js自定义鼠标右键的贯彻原理及源码
  • JavaScript鼠标事件,点击鼠标右键,弹出div的粗略实例

您大概感兴趣的稿子:

  • javascript鼠标右键菜单自定义效果
  • 三种JS完结屏蔽鼠标右键的点子
  • Javascript贯彻鼠标右键特色菜单
  • js达成完全自定义可带多级目录的网页鼠标右键菜单方法
  • js剖断鼠标左、中、右键哪个被点击的方法
  • JS 获取鼠标左右键的键值方法
  • javascript完毕在某些成分上阻拦鼠标右键事件的秘诀和实例
  • js自定义鼠标右键的实现原理及源码
  • JavaScript鼠标事件,点击鼠标右键,弹出div的简约实例
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:JavaScript模拟鼠标右键菜单功效,二种JS完成屏蔽