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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
react-router实现按需加载
May 09 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
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
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
一些mootools的学习资源
2010/02/07 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python基础语法(Python基础知识点)
2016/02/28 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
毕业生教师求职信
2013/10/20 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
房产继承公证书
2014/04/09 职场文书
法律系毕业生求职信
2014/05/28 职场文书
机关作风建设自查报告
2014/10/22 职场文书
寒假致家长的一封信
2015/10/10 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python