版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、js如何实现自定义鼠标右击菜单代码如下:html代码document右击显示菜单菜单一菜单二htmljs代码关于菜单的定位主要是在第一个if语句部分,后面为验证按钮效果。menu1.style.left和menu1.style.top用于对菜单举行定位,由css样式表可知menu1的position属性定位为absolute,style.top定位相对于离它最近的position属性值不为static的父辈元素,此处即为body。menu的位置需要按照页面布局的详细状况来推断是e.offsetx/y、e.clientx/y或是其它,此处加上document.documentelement.sc
2、rolltop是考虑加上滚动条的状况(事实上这个例子里面并没有滚动条)。window.onload=function()/以下为自定义右击菜单document.oncontextmenu=function(e)/阻挡执行扫瞄器默认右击大事e.preventdefault();/谈天室好友列表if(document.getelementbyid("menu-friend")varmenu1=document.getelementbyid("menu-friend");menu1.style.display="block"document
3、.getelementbyid("contain-friend").onmousedown=function(e)/菜单定位menu1.style.left=e.offsetx+"px"menu1.style.top=document.documentelement.scrolltop+e.clienty+"px"/alert(menu1.style.top)if(document.getelementbyid("contain-friend")if(e.button=2)menu1.style.visibilit
4、y="visible"elsemenu1.style.visibility="hidden"if(document.getelementbyid("btn1")document.getelementbyid("btn1").onmousedown=function(e)document.getelementbyid("label1").innerhtml="你点击了菜单一"if(document.getelementbyid("btn2")document
5、.getelementbyid("btn2").onmousedown=function(e)document.getelementbyid("label1").innerhtml="你点击了菜单二"returnfalse;/与e.preventdefault();功能相同,但是必需放在最后否则在return后面的内容均不执行javascript文件css样式表1/*自定义右击菜单*/.containbackground-color:d1cebc;height:100px;width:300px;.menuwidth:150px;background-color:white;visibility:hidden;position:absolute;box-shadow:0px0px10pxd1cebc.menu-itembackground-color:fff;margin:0;.menu-item-btnwidth:146px;margin:2px;border:0;text-align:left;padding-left:60px;padding-top:5px;padding-bottom:5px;back
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 学年湖南省邵阳市隆回县2026届高三上数学期末监测模拟试题含解析
- 胃癌术后护理措施
- 医疗数据合规性验证的共识算法优化
- 医疗数据区块链的安全评估指标体系
- 2026届湖南省湘南联盟生物高三上期末检测模拟试题含解析
- 医疗数据分级保护区块链标准体系构建
- 2026届江苏省姜堰区蒋垛中学生物高一第一学期期末综合测试模拟试题含解析
- 英语科技论文写作 课件 3-引言写作-21
- 贵州省长顺县二中2026届高一数学第一学期期末检测试题含解析
- 医疗数据共享区块链技术的安全性验证方法
- 2025食品行业专利布局分析及技术壁垒构建与创新保护策略报告
- 2025四川省教育考试院招聘编外聘用人员15人考试笔试模拟试题及答案解析
- 水产品速冻能效优化-洞察与解读
- 会议纪要标准化撰写格式及案例参考
- 2025年国家开放大学《刑事诉讼法》期末考试备考试题及答案解析
- 论文导论范文
- 贵州省铜仁市2024-2025学年高二上学期期末教学质量监测政治试卷(含答案)
- GJB573B-2020引信及引信零部件环境与性能试验方法
- 2025年重庆市直、区事业单位招聘考试(管理基础知识)历年参考题库含答案详解(5卷)
- 统编教材五年级上册语文全册课后习题参考答案完整版
- Unit5Theweatherandus单元整体(教学设计)-人教PEP版英语四年级上册
评论
0/150
提交评论