Javascript实现鼠标右键特色菜单


Posted in Javascript onAugust 04, 2015

在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 < getElementsByClassName("contextMenuItem").length; i ) {
 
        getElementsByClassName("contextMenuItem")[i].onclick = function(event) {
          event = event ? event : window.event
          var target = event.srcElement ? event.srcElement : event.targe;
          document.getElementById("contextMenu").style.display = "none";
          //alert("您点击了: "  target.innerHTML);
           
        }
      }
 
    }
     
    function block(event) {
      if (window.event) {
        event = window.event;
        event.returnValue = false;
      } else event.preventDefault();
    }
    //兼容IE不支持getElementsByClassName
    function getElementsByClassName(className, root, tagName) {
      if (root) {
        root = typeof root == "string" ? document.getElementById(root) : root;
      } else {
        root = document.body;
      }
      tagName = tagName || "*";
      if (document.getElementsByClassName) { 
        return root.getElementsByClassName(className);
      } else {
        var tag = root.getElementsByTagName(tagName); 
        var tagAll = [];
        for (var i = 0; i < tag.length; i ) {
          for (var j = 0, n = tag[i].className.split(' '); j < n.length; j ) {
            if (n[j] == className) {
              tagAll.push(tag[i]);
              break;
            }
          }
        }
        return tagAll;
      }
    }

效果图:

Javascript实现鼠标右键特色菜单

以上就是本文的全部内容,希望大家可以喜欢。

Javascript 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 #Javascript
常用的Javascript数据验证插件
Aug 04 #Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 #Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 #Javascript
基于ajax实现文件上传并显示进度条
Aug 03 #Javascript
函数window.open实现关闭所有的子窗口
Aug 03 #Javascript
百度地图api如何使用
Aug 03 #Javascript
You might like
基于文本的访客签到簿
2006/10/09 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
Python常用随机数与随机字符串方法实例
2015/04/09 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Zabbix实现微信报警功能
2016/10/09 Python
python实现FTP服务器服务的方法
2017/04/11 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
python中@contextmanager实例用法
2021/02/07 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
秋天的雨教学反思
2014/04/27 职场文书
货款欠条范本
2015/07/03 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
python脚本框架webpy模板赋值实现
2021/11/20 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android