重庆网站建设接重庆零臻科技,建站申请,外贸做网站建设哪家好,wordpress 分页 未找到页面今天分享一个#xff0c;单击鼠标右键弹出自定义菜单#xff0c;选中不同菜单选项#xff0c;实现其对应功能 首先先自已定义一个菜单 div idmenuulli添加/lili删除/lili修改/li/ul单击鼠标右键弹出自定义菜单选中不同菜单选项实现其对应功能 首先先自已定义一个菜单 div idmenuulli添加/lili删除/lili修改/li/ul/div对菜单进行简单的样式设置并且设置为隐藏状态 #menu {width: 80px;background: #CCC;position: absolute;display: none;} 主体区域的内容代码 div idcontent前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发前端设计一般可以理解为网站的视觉设计前端开发则是网站的前台代码实现现在最新的高级版本HTML5、CSS3以及SVG等。HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中在页面的布局时HTML将元素进行定义CSS对展示的元素进行定位再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单但这里面需要掌握的东西绝对不会少。在进行开发前需要对这些概念弄清楚、弄明白这样在开发的过程中才会得心应手。/div在这个content容器里实现鼠标的右键打开菜单功能主要的js代码如下 script // 获取当前的元素var content document.getElementById(content); content.oncontextmenu function (ev) {//阻止鼠标的默认事件ev.preventDefault(); //做一些兼容性的处理var ev ev || event;var scrollTop document.documentElement.scrollTop || document.body.scrollTop;menu.style.display block;menu.style.left ev.clientX px;//当滑动滚动条时也能准确获取菜单位置menu.style.top ev.clientY scrollTop px;// return false;}// 事件委托的方式 实现自定义菜单的功能var ul document.querySelector(ul)ul.onclick function (e) {var t e.targetif (t.innerText 添加) {输入你想实现的功能代码并且点击后把菜单隐藏menu.style.display none;}} /script 通过事件委托判断每次点击菜单的内容写出相应的逻辑代码完成相应的功能。 contextmenu事件支持所有 HTML 元素这意味者你可以给不同的元素自定义不同的右键菜单。转载于:https://www.cnblogs.com/zhige-1/p/11097044.html
