下拉菜单实现问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2016 天前的主题，其中的信息可能已经有所发展或是发生改变。

<div>
<span class="btn">下拉菜单</span>
    <div class="dropmenu">
        <span>菜单一</span>
        <span>菜单二</span>
    </div>
</div>

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

9 条回复 • 2019-05-25 14:51:10 +08:00

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 via Android

@cydysm 哈哈哈，回复不支持 markdown，傻眼了吧

Hilong

2019-05-24 19:09:14 +08:00 via Android

冒泡捕获啊

Exia

2019-05-24 19:10:53 +08:00

阻止菜单按钮冒泡就行

cydysm

2019-05-25 04:25:07 +08:00 via iPhone

@Hilong 改完以后…我看到就傻眼了

redbuck

2019-05-25 09:35:17 +08:00 via iPhone

还有个办法，菜单 show 才给 body 加监听，hide 就移除监听

redbuck

2019-05-25 09:35:58 +08:00 via iPhone

@redbuck
加监听是指关闭菜单的回调

zarte

2019-05-25 14:50:25 +08:00

@Exia 应该是这个，谢谢

zarte

2019-05-25 14:51:10 +08:00

@redbuck 不是这个，按楼上阻止冒泡应该可以。