segmentfault的右上角的小铃铛,弹出菜单之后,当点击菜单范围,菜单不消失,当点击菜单以外范 财富值64

2016-11-02 17:43发布

想知道原理,谢谢!

4条回答
余音袅袅 - 这个人很懒,什么都没留下
1楼 · 2016-11-02 18:19.采纳回答

body上绑定事件,单击消失,
铃铛阻止事件冒泡

目测可能是这样写的,那个铃铛class是opts__item--message,假定用的jQ

段曼 - 我很好
3楼-- · 2016-11-02 18:10

在BS的弹出菜单控件中,它会先利用JavaScript监听整个document的点击事件。如果有对屏幕的点击,会把所有的弹出菜单进行关闭(隐藏)。
而对于某一个弹出菜单界面,它也会通过JavaScript监听其弹出层范围内的点击事件。如果在此范围内进行了点击,则会阻断点击事件的冒泡。由于事件冒泡是从小到大进行的,所以事件是不会再传递到document上,也就不能让监听document的JavaScript去关闭菜单了。

对包含小铃铛菜单的DIVclass="opts__item--message"绑定一个click事件,点击的时候,用stopPropagation方法阻止事件传播。
对document也绑定一个click事件,点击的时候,关闭打开的菜单。

一周热门 更多>