在BS的彈出菜單控件中，它會先利用JavaScript監聽整個document的點擊事件。如果有對屏幕的點擊，會把所有的彈出菜單進行關閉（隱藏）。而對于某一個彈出菜單界面，它也會通過JavaScript監聽其彈出層范圍內的點擊事件。如果在此范圍內進行了點擊，則會阻斷點擊事件的冒泡。由于事件冒泡是從小到大進行的，所以事件是不會再傳遞到document上，也就不能讓監聽document的JavaScript去關閉菜單了。

目測可能是這樣寫的，那個鈴鐺class是opts__item--message，假定用的jQ

沒有細致研究過SF的代碼，這里給你講講Bootstrap里的彈出菜單點擊事件的邏輯吧，相信與SF的應用是類同的。

對包含小鈴鐺菜單的DIVclass="opts__item--message"綁定一個click事件，點擊的時候，用stopPropagation方法阻止事件傳播。對document也綁定一個click事件，點擊的時候，關閉打開的菜單。

.opts__item--message為菜單，.message為鈴鐺和菜單的父級，整個的邏輯就是你點擊頁面，會冒泡到body，觸發上述綁定的事件，如果菜單的display不為none，且你當前點擊的不屬于這個message這個div的子元素（頁面結構可以自己看下）（屬于這個子元素就是點擊的菜單本身或者鈴鐺了），就hide

body上綁定事件，單擊消失，鈴鐺阻止事件冒泡

總結

以上是生活随笔為你收集整理的segmentfault的右上角的小铃铛，弹出菜单之后，当点击菜单范围，菜单不消失，当点击菜单以外范 财富值80的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。