个人中心
gpt4 book ai didi

JavaScript实现点击自制菜单效果

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 31 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JavaScript实现点击自制菜单效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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 >

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< 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实现点击自制菜单效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/weixin_45773503/article/details/113425737 。

最后此篇关于JavaScript实现点击自制菜单效果的文章就讲到这里了,如果你想了解更多关于JavaScript实现点击自制菜单效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

31 4 0
文章推荐： Vue常用API、高级API的相关总结
文章推荐： Django跨域请求无法传递Cookie的解决
文章推荐： 使用Flask和Django中解决跨域请求问题
文章推荐： Vue项目打包部署到apache服务器的方法步骤
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com