要求:点击页面鼠标右键,阻止默认右键菜单的弹出,并弹出自定义右键菜单。

效果示例:

参考代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>习题</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. list-style: none;
  12. }
  13.  
  14. #div1 {
  15. position: absolute;
  16. width: 80px;
  17. background: #ccc;
  18. }
  19. </style>
  20. <script>
  21.  
  22. window.onload = function () {
  23. //此处写代码
  24. var oDiv=document.getElementById('div1');
  25. oDiv.style.display='none';
  26. document.oncontextmenu=function(ev){
  27. var oEvent=event||ev;
  28. oDiv.style.display='block';
  29. oDiv.style.left=oEvent.clientX+'px';
  30. oDiv.style.top=oEvent.clientY+'px';
  31. return false;
  32. }
  33. document.onclick=function(){
  34. oDiv.style.display='none';
  35. }
  36. }
  37. </script>
  38. </head>
  39.  
  40. <body>
  41. <div id='div1'>
  42. <ul>
  43. <li>aaa</li>
  44. <li>bbb</li>
  45. <li>ccc</li>
  46. </ul>
  47. </div>
  48. </body>
  49. </html>

JS自定义右键菜单案例的更多相关文章

  1. js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细)

    js进阶 12-18  jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...

  2. html鼠标自定义右键菜单:css+js实现自定义html右键菜单

    我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码. ...

  3. JS简单实现自定义右键菜单

    RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...

  4. js之自定义右键菜单

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JS学习笔记 - 自定义右键菜单、文本框只能输入数字

    <script> // 事件总共有2个部分, //1.点击鼠标右键的表现 oncontextmenu 2.点击鼠标左键的表现(即普通点击onclick) // 点击右键,div位置定位到鼠 ...

  6. 自定义右键菜单,禁用浏览器自带的右键菜单[右键菜单实现--Demo]

    许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 <%@ page language=&q ...

  7. jquery 自定义右键菜单

    如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止 ...

  8. ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

  9. JavaScript自定义右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. [luoguP1440] 求m区间内的最小值(单调队列 || 线段树)

    传送门 这种水题没必要搞线段树了,单调队列就行啊. ——代码 #include <cstdio> ; , t = ; int a[MAXN], q[MAXN]; int main() { ...

  2. Elasticsearch5.6搭建及拼音中文混合搜索实现

    https://blog.csdn.net/UUfFO/article/details/78154499

  3. Web 后端编程的几个关键点(总结中...)

    基础 服务端结构 服务器如何部署,负载均衡,代理技术,如何向B端提供服务? 分布式架构 与前端界面的交互形式 数据 CURD 表之间的关联 较为棘手 如何将一对多 多对多的概念进行 面向对象 描述 前 ...

  4. POJ 1064_Cable master

    题意: 给定一系列长度的电缆,将他们切成K条相等长度的电缆,问每条最长有多长? 分析: 对长度进行二分,判断能否满足K条. 二分搜索: 在求解最大化或最小化问题中,能够比较简单的判断条件是否满足,那么 ...

  5. codeforces 691F(组合数计算)

    Couple Cover, a wildly popular luck-based game, is about to begin! Two players must work together to ...

  6. 【进击后端】ubuntu 快速安装node mongodb express

    安装软件:node,mongo,express 1.apt install node 2.node -v 3.apt install mongodb 4.mongo -version 5.apt in ...

  7. Vue.js父子通信之所有方法和数据共享

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [52ABP系列] - 001、SPA免费项目模版搭建教程

    前言 这个项目是基于 ABP ASPNetCore 免费版,整合 NG-Alian 和 NG-Zorro 的项目,所以比较适合熟悉 ABP 和 Angular2+ 的开发人员, 如果你是新手,学习的话 ...

  9. java实现floyd统计天津地铁的网站距离

    一:说明 (1)使用floyd实现各个网站的计算记录和路径 (2)网站获取和初始距离依据外部文件得到 (3)结果以外部文件的形式存储 (4)网站间转乘,觉得初始值也为1 (5)代码凝视比較具体,如有疑 ...

  10. 手游产品经理初探(二)从营销角度看loading界面

    近期開始写产品相关的专题,准备从细节入手去思考.总结一些不为人注意的细节地方. 今天给大家分享的是游戏里面都有的loading界面. 还是从几个在Facebook上排名靠前的Casino游戏的load ...