个人中心
gpt4 book ai didi

javascript局部自定义鼠标右键菜单

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

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

这篇CFSDN的博客文章javascript局部自定义鼠标右键菜单由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了js局部自定义鼠标右键菜单的具体代码，供大家参考，具体内容如下 。

前言 。

html局部自定义鼠标右键菜单 局部！ 局部！ 局部！ 重要的关键词说三遍！ 。

1、效果展示 。

javascript局部自定义鼠标右键菜单

2、源代码 。

?
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
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
< html >
  < head >
  < meta charset = "utf-8" >
  < title ></ title >
  < style type = "text/css" >
  #TextBox{
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  }
  #menu{
  position: absolute;
  border: 1px solid #000;
  }
  #menu > div:nth-child(2){
  border-top: 1px solid #000;
  }
  #menu > div:nth-child(3){
  border-top: 1px solid #000;
  }
  #menu > div:nth-child(4){
  border-top: 1px solid #000;
  }
  #menu > div:hover{
  cursor: pointer;
  background-color: #0078E7;
  }
  </ style >
  </ head >
  < body >
  < div id = "TextBox" >
  < div id = "menu" >
  < div >自定义菜单</ div >
  < div >1</ div >
  < div >2</ div >
  < div >3</ div >
  </ div >
  </ div >
  < script type = "text/javascript" >
  window.onload = function(){
  var TextBox = document.getElementById("TextBox");
  var ul = document.getElementById("menu"); //获取ul节点对象
  ul.style.display = "none";
  /*为document绑定鼠标右键菜单事件*/
  TextBox.oncontextmenu = function(e){
   var _event = window.event||e; //事件对象
   var x = _event.clientX; // 鼠标的x坐标
   var y = _event.clientY; //鼠标的y坐标
 
   ul.style.display = "block";
   ul.style.left = x + "px"; //改变ul的坐标
   ul.style.top = y + "px";
   //阻止默认行为
   if(_event.preventDefault){
   _event.preventDefault(); //标准格式
   }else{
   _event.returnValue = false; //IE格式
   }
  }
  TextBox.onclick = function(){
   ul.style.display = "none";
  }
  }
  </ script >
  </ body >
</ html >

总结 。

以上就是html局部自定义鼠标右键菜单的方式.

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

原文链接：https://blog.csdn.net/baidu_38760069/article/details/110818887 。

最后此篇关于javascript局部自定义鼠标右键菜单的文章就讲到这里了,如果你想了解更多关于javascript局部自定义鼠标右键菜单的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： PHP设计模式之解释器（Interpreter）模式入门与应用详解
文章推荐： Laravel如何使用数据库事务及捕获事务失败后的异常详解
文章推荐： PHP设计模式之工厂模式（Factory）入门与应用详解
文章推荐： JavaScript对象访问器Getter及Setter原理解析
qq735679552
个人简介

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

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