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获取input标签的输入值实现代码
Aug 05 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
小程序中手机号识别的示例
Dec 14 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类中Static方法效率测试代码
2010/10/17 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
linux中cd命令使用详解
2015/01/08 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
jquery css实现流程进度条
2020/03/26 jQuery
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
windows上安装Anaconda和python的教程详解
2017/03/28 Python
使用Python对SQLite数据库操作
2017/04/06 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python_LDA实现方法详解
2017/10/25 Python
Python切片操作实例分析
2018/03/16 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
python sorted函数的小练习及解答
2019/09/18 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
浅析python连接数据库的重要事项
2021/02/22 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
数组越界问题
2015/10/21 面试题
人力资源部经理助理岗位职责
2014/03/04 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL