84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
想知道原理,谢谢!
认证0级讲师
目测可能是这样写的,那个铃铛class是opts__item--message,假定用的jQ
$(document).on('click',function(e){ var tar = e.target , msg = $('.opts__item--message'); if (!(tar == msg[0])) { msg.hide(); } });
question.min.js添加缩进后,看3672行如下: t("body").on("click", function(e) { return "none" !== t(".opts__item--message").css("display") && 0 === t(e.target).parents(".message").length ? t(".opts__item--message").addClass("hide") : void 0 }),
.opts__item--message为菜单,.message为铃铛和菜单的父级,整个的逻辑就是你点击页面,会冒泡到body,触发上述绑定的事件,如果菜单的display不为none,且你当前点击的不属于这个message这个p的子元素(页面结构可以自己看下)(属于这个子元素就是点击的菜单本身或者铃铛了),就hide
.opts__item--message
.message
body上绑定事件,单击消失,铃铛阻止事件冒泡
没有细致研究过SF的代码,这里给你讲讲Bootstrap里的弹出菜单点击事件的逻辑吧,相信与SF的应用是类同的。
在BS的弹出菜单控件中,它会先利用JavaScript监听整个document的点击事件。如果有对屏幕的点击,会把所有的弹出菜单进行关闭(隐藏)。而对于某一个弹出菜单界面,它也会通过JavaScript监听其弹出层范围内的点击事件。如果在此范围内进行了点击,则会阻断点击事件的冒泡。由于事件冒泡是从小到大进行的,所以事件是不会再传递到document上,也就不能让监听document的JavaScript去关闭菜单了。
对包含小铃铛菜单的pclass="opts__item--message"绑定一个click事件,点击的时候,用stopPropagation方法阻止事件传播。对document也绑定一个click事件,点击的时候,关闭打开的菜单。
class="opts__item--message"
目测可能是这样写的,那个铃铛class是opts__item--message,假定用的jQ
.opts__item--message
为菜单,.message
为铃铛和菜单的父级,整个的逻辑就是你点击页面,会冒泡到body,触发上述绑定的事件,如果菜单的display不为none,且你当前点击的不属于这个message这个p的子元素(页面结构可以自己看下)(属于这个子元素就是点击的菜单本身或者铃铛了),就hidebody上绑定事件,单击消失,
铃铛阻止事件冒泡
没有细致研究过SF的代码,这里给你讲讲Bootstrap里的弹出菜单点击事件的逻辑吧,相信与SF的应用是类同的。
在BS的弹出菜单控件中,它会先利用JavaScript监听整个document的点击事件。如果有对屏幕的点击,会把所有的弹出菜单进行关闭(隐藏)。
而对于某一个弹出菜单界面,它也会通过JavaScript监听其弹出层范围内的点击事件。如果在此范围内进行了点击,则会阻断点击事件的冒泡。由于事件冒泡是从小到大进行的,所以事件是不会再传递到document上,也就不能让监听document的JavaScript去关闭菜单了。
对包含小铃铛菜单的p
class="opts__item--message"
绑定一个click事件,点击的时候,用stopPropagation方法阻止事件传播。对document也绑定一个click事件,点击的时候,关闭打开的菜单。