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

---

qayii 2022-09-10 12:04

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

---

M25****6245 2022-09-10 12:07

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

---

qkoufu1706 2022-09-10 12:08

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

---

我心依然 2022-09-10 12:09

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

---

霞映澄塘半面妝發呆草疏清淺張先 2022-09-10 12:14

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

---

南樓清主 2022-09-10 12:17

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

---