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 相关文章推荐
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
JavaScript实现网页下拉菜单效果
Nov 20 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实现多条件查询实例代码
2010/07/17 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
Python清空文件并替换内容的实例
2018/10/22 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
Python常用外部指令执行代码实例
2020/11/05 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
红旗团支部事迹材料
2014/01/27 职场文书
政府信息公开实施方案
2014/05/09 职场文书
英文演讲稿
2014/05/15 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书