下拉菜单实现问题

2019-05-24 18:11:34 +08:00
 zarte
<div>
<span class="btn">下拉菜单</span>
    <div class="dropmenu">
        <span>菜单一</span>
        <span>菜单二</span>
    </div>
</div>

想实现的效果,点击 btn,dropmenu 显示。点击页面其他 body 地方 dropmenu 消失。
遇到的问题是如果点击 dropmenu 也会触发绑定到 body 的事件,这个如何解决?
点击 dropmenu 里的菜单需要进行一些而外操作

966 次点击
所在节点    问与答
9 条回复
cydysm
2019-05-24 18:41:34 +08:00
```
<div>
<span class="btn">下拉菜单</span>
<div class="dropmenu">
<span>菜单一</span>
<span>菜单二</span>
</div>
</div>
```

我先改下缩进
Hilong
2019-05-24 19:08:57 +08:00
@cydysm 哈哈哈,回复不支持 markdown,傻眼了吧
Hilong
2019-05-24 19:09:14 +08:00
冒泡捕获啊
Exia
2019-05-24 19:10:53 +08:00
阻止菜单按钮冒泡就行
cydysm
2019-05-25 04:25:07 +08:00
@Hilong 改完以后…我看到就傻眼了
redbuck
2019-05-25 09:35:17 +08:00
还有个办法,菜单 show 才给 body 加监听,hide 就移除监听
redbuck
2019-05-25 09:35:58 +08:00
@redbuck
加监听是指关闭菜单的回调
zarte
2019-05-25 14:50:25 +08:00
@Exia 应该是这个,谢谢
zarte
2019-05-25 14:51:10 +08:00
@redbuck 不是这个,按楼上阻止冒泡应该可以。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/567391

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX