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

---

宿命2100 2022-09-09 08:16

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

---

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

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

---

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

沒有細(xì)致研究過SF的代碼，這里給你講講Bootstrap里的彈出菜單點(diǎn)擊事件的邏輯吧，相信與SF的應(yīng)用是類同的。

---

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

對包含小鈴鐺菜單的DIVclass="opts__item--message"綁定一個(gè)click事件，點(diǎn)擊的時(shí)候，用stopPropagation方法阻止事件傳播。對document也綁定一個(gè)click事件，點(diǎn)擊的時(shí)候，關(guān)閉打開的菜單。

---

雞實(shí)在你太美 2022-09-09 08:27

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

---

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

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

---