JavaScript实现点击自制菜单效果


Posted in Javascript onFebruary 02, 2021

本文实例为大家分享了JavaScript实现点击自制菜单效果的具体代码,供大家参考,具体内容如下

应用场景:当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时,需要阻止浏览器默认行为,并执行我们想要的效果

第一种方式,通过创建元素的方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 3000px;
    }
    
    .menu {
      width: 100px;
      height: 280px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }
  </style>
</head>

<body>
  <script>
    var Bon = true;
    var menu = null;
    document.oncontextmenu = function(event) {
      if (Bon) {
        menu = document.createElement("div");
        menu.classList.add("menu");
        document.body.appendChild(menu);
        menu.style.left = event.pageX + "px";
        menu.style.top = event.pageY + "px";
        menu.style.display = "block";
        Bon = false;
        event.preventDefault();
      } else {
        menu.style.left = event.pageX + "px";
        menu.style.top = event.pageY + "px";
        event.preventDefault();
      }
    }

    document.onmousedown = function(e) {
      if (e.button == 0) {
        var menu = document.querySelector(".menu");
        document.body.removeChild(menu);
        Bon = true;
      }
    }
  </script>
</body>

</html>

第二种:通过隐藏元素的方式

<div class="menu"></div>
 <script>
    var menu = document.querySelector(".menu");
    document.oncontextmenu = function(event) {
      menu.style.left = event.pageX + "px";
      menu.style.top = event.pageY + "px";
      menu.style.display = "block";
      event.preventDefault();
    }
    document.onmousedown = function(e) {
      if (e.button == 0) {
        menu.style.display = "none";
      }
    }
</script>

当我们点击右键时就不会弹出默认的菜单了,弹出了我设置的红框框。

JavaScript实现点击自制菜单效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
给js文件传参数(详解)
Jul 13 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
js实现无缝滚动图
Feb 22 Javascript
详解Node.js开发中的express-session
May 19 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
react 组件传值的三种方法
Jun 03 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 #Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 #Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
vue-video-player 断点续播的实现
Feb 01 #Vue.js
Element el-button 按钮组件的使用详解
Feb 01 #Javascript
js实现简单商品筛选功能
Feb 02 #Javascript
如何在现代JavaScript中编写异步任务
Jan 31 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
深入源码解析Python中的对象与类型
2015/12/11 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python中with用法讲解
2020/02/07 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
装修致歉信
2014/01/15 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
《金子》教学反思
2014/04/13 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
python如何在word中存储本地图片
2021/04/07 Python
php实例化对象的实例方法
2021/11/17 PHP
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android