江苏龙网

  1. 首页 > 生活 > >

知乎网站右上的消息点击后出现个消息框，再点消息或点这个消息框以外的地方，这个框就消失，是咋实现的

我知道的办法是jquery的阻止冒泡,大概是这样，说不定用了其他办法$(function(){ $(document).click(function(){ $("#zh-top-nav-live-new").hide(); }) $("#zh-top-nav-live").click(function(){ $("#zh-top-nav-live-new").show(); }) $("#zh-top-nav-live-new").click(function(e){ e.stopPropagation(); })})
■网友
不同意楼上，明显文不对题，题主想问的是怎么判断点击事件触发的来源元素，Jquery的话比较方便，利用事件冒泡绑定点击事件监听到body上，然后用not选择器排除下拉菜单本身的点击事件。原生JS的话利用e.target（FF）或者e.srcElement（IE）来判断事件来源
■网友
用jQuery的话，可以监听window点击,判断点击来源closest，大概这样，$(window).on(\u0026#39;click\u0026#39;,function(e){ if( $(e.target).closest(\u0026#39;#box\u0026#39;).length ){ //判断点击对象是否在#box内 }else{ //在#box以外的点击 }});
■网友
// 先找到消息框元素，假设是 id="message" 的元素var message = $(\u0026#39;#message\u0026#39;);$(document).on(\u0026#39;mouseup\u0026#39;, function(e) { if( ! $(e.target).is(messsage) ) { message.hide(); }});解释一下，就是档鼠标释放时，判断是否在 message 元素以外，如果是，就将 message 元素隐藏。
■网友
点“消息”后弹出来框框，用firefox的“查看元素”功能。定位到这个框框在html中是一个id为zh-top-nav-live-new的div元素，注意它style下的dispaly属性为:block.知乎网站右上的消息点击后出现个消息框，再点消息或点这个消息框以外的地方，这个框就消失，是咋实现的
【网站右上的消息点击后出现个消息框，再点消息或点这个消息框以外的地方，这个框就消失，是咋实现的】
再点“消息”，把这个框框关掉，发现这里的dispaly属性变成none了。知乎网站右上的消息点击后出现个消息框，再点消息或点这个消息框以外的地方，这个框就消失，是咋实现的

所以说，这个框框一直在，仅是显示与不显示的问题。估计点“消息”的时候就是用javascript修改了它的style下的display值。我这么玩，会不会把我黑掉啊。


    推荐阅读


    上一篇：怎样评价科技脱口秀《真像大白》

    下一篇：假如2048是一个双方博弈的游戏