segmentfault的右上角的小铃铛，弹出菜单之后，当点击菜单范围，菜单不消失，当点击菜单以外范 财富值64？

想知道原理，谢谢！优艾设计网_设计LOGO

---

wing1 优艾设计网_PS交流 2022-09-11 19:40

对包含小铃铛菜单的DIVclass="opts__item--message"绑定一个click事件，点击的时候，用stopPropagation方法阻止事件传播。对document也绑定一个click事件，点击的时候，关闭打开的菜单。

---

ww19750614 优艾设计网_设计圈 2022-09-11 19:43

在BS的弹出菜单控件中，它会先利用JavaScript监听整个document的点击事件。如果有对屏幕的点击，会把所有的弹出菜单进行关闭（隐藏）。而对于某一个弹出菜单界面，它也会通过JavaScript监听其弹出层范围内的点击事件。如果在此范围内进行了点击，则会阻断点击事件的冒泡。由于事件冒泡是从小到大进行的，所以事件是不会再传递到document上，也就不能让监听document的JavaScript去关闭菜单了。

---

陌wei 2022-09-11 19:51

优艾设计网_PS交流

body上绑定事件，单击消失，铃铛阻止事件冒泡

---

wing1 2022-09-11 20:00

优艾设计网_Photoshop百科

目测可能是这样写的，那个铃铛class是opts__item--message，假定用的jQ

---