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

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

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

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。