全球访问量最大的10个网站,网站建设子栏目文案,网站建好了seo怎么做,网站建设学生兼职弹出菜单应该具有的功能#xff0c;当鼠标点击其他区域时#xff0c;则关闭该菜单。 问题来了#xff0c;怎么检测鼠标点击了其他区域而不是当前菜单#xff1f; 百度“JS检测区域外的点击事件”#xff0c;会发现有很多方法#xff0c;有递归检测父元素#xff0c;有遍…弹出菜单应该具有的功能当鼠标点击其他区域时则关闭该菜单。 问题来了怎么检测鼠标点击了其他区域而不是当前菜单 百度“JS检测区域外的点击事件”会发现有很多方法有递归检测父元素有遍历冒泡节点等等。 vue 解决的思路将菜单区域的点击事件用 stop 修饰在最顶层元素调用鼠标单击事件关闭菜单完毕 由于菜单区域单击事件已被 stop 停止冒泡顶层元素无法捕获因此菜单区域的单击并不会关闭自己。这样不需要增加任何逻辑代码只需要在单击事件后增加一个 .stop 后缀来修饰就能解决。
演示效果和源码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js/scripttitle弹出菜单测试1/titlestylebody {padding: 0; margin: 0;}#base {width: 100%;height: 100%;position: absolute;}#nav { margin: 16px;}#navspan {display: inline-block;border: 1px solid #bbb;background-color: #ebf4f6;border-radius: 6px;padding: 6px 18px;user-select: none;}#navspan:hover {background-color: #ace4eb;}.menudiv {display: flex;justify-content: flex-start;flex-direction: column;width: 160px;border: 1px solid #bbb;border-radius: 6px;padding: 12px 0;box-shadow: 0px 0px 5px #999;position: absolute;}.menudivdiv {width: 148px;height: 32px;margin: 0 6px;line-height: 32px;border-radius: 4px;text-align: center;}.menudivdiv:hover {background-color: #ace4eb;}hr {width: 154px;height: 1px;color: #808080;margin: 5px 2px;}/style
/head
bodydiv idbase clickpickOtherdiv idnav click.stopshowMenuspan idck1手机/spanspan idck2电脑/spanspan idck3家具/span/divdiv click.stoppickMenu classmenudiv v-ifcMenuck1m idck1mdiv手机通讯/divdiv手机配件/divdiv运营商/divdiv智能设备/div/divdiv v-ifcMenuck2m idck2mdiv电脑整机/divdiv电脑配件/divhrdiv外设产品/divdiv游戏设备/divdiv游戏设备/divdiv办公设备/div/divdiv v-ifcMenuck3m idck3mdiv家电厨具/divdiv家装软饰/divdiv生活日用/divdiv灯具五金/div/div/div/divscriptvar vm new Vue({el: #base,data: { cMenu: }, // cMenu 为空时不显示任何菜单methods: {showMenu: function () {const btn event.target;if (btn.nodeName.toUpperCase() ! SPAN) return;// 计算菜单的新坐标const e $(btn);const x e.offset().left e.innerWidth();const y e.offset().top e.innerHeight();// 弹出菜单跟随按钮位置而移动这里需要二次渲染(1 显示菜单2 移动菜单)const id btn.id m;this.cMenu id;this.$nextTick(e { $(# id).css({ top: y, left: x }); });},// 鼠标点击全部区域菜单区域的单击被阻断冒泡不会触发此函数pickOther: function () { this.cMenu ; },// 点击菜单区域时给出当前点击的菜单名pickMenu: function () { console.log($(event.target).text()); }}});/script
/body
/html
