想知道原理，謝<愛尬聊_百科知識大全>謝！

---

宿命2100 2022-09-09 08:16

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

---

萱冰雪蕊 2022-09-09 08:18

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

---

我是你霸霸呀 2022-09-09 08:19

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

---

太陽花的杯子 2022-09-09 08:25

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

---

雞實在你太美 2022-09-09 08:27

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

---

205****157 2022-09-09 08:35

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

---