zoukankan      html  css  js  c++  java
  • 重写JS的鼠标右键点击菜单

    重写JS的鼠标右键点击菜单

    该效果主要有三点,一是对重写的下拉菜单的隐藏和显示;二是屏蔽默认的鼠标右键事件;三是鼠标左键点击页面下拉菜单隐藏。

    不多说,上html代码:

    1 <ul id="wrapper">
    2     <li><a>一级</a></li>
    3     <li><a>二级</a></li>
    4     <li><a>三级</a></li>
    5 </ul>

    JavaScript代码如下:

    复制代码
     1 window.onload = function(){
     2   var wrap = document.getElementById('wrapper');  
     3   wrap.style.display = 'none';  
     4   var li = document.getElementsByTagName('li');
     5 
     6   for(var i=0;i<li.length;i++){
     7     li.onmouseover = function(){
     8     this.classname = "active";
     9   }
    10   li.onmouseout = function(){
    11     this.classname = "";
    12   }  
    13  }   
    14  
    15  document.oncontextmenu = function(e){
    16    var e = event || window.event;
    17    wrap.style.display = "block";
    18    wrap.style.left = e.clientX+'px';
    19    wrap.style.right = e.clientY +'px';
    20     return false;//取消右键点击的默认事件
    21  };
    22    document.onclick= function(){
    23      wrap.style.display = 'block';
    24   }
    25 }
    复制代码

    该段代码最关键的地方,就是在oncontext事件中返回false,从而达到取消默认事件的效果。

  • 相关阅读:
    个人项目(Word Count Java)
    自我介绍+软工5问
    第六次实践
    第五次实践作业
    第四次实践作业
    第三次实践作业
    第二次实践作业
    第1次实践作业
    第06组 Beta版本演示
    第06组 Beta冲刺(4/4)
  • 原文地址:https://www.cnblogs.com/YangJieCheng/p/7080615.html
Copyright © 2011-2022 走看看