想知道原理,谢谢!
认证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事件,点击的时候,关闭打开的菜单。