星鸿娱乐平台js利用事件的阻止冒泡实现点击空白 - 星鸿娱乐平台【授权指定首页】

常见问题当前位置:星鸿娱乐 > 常见问题 > >

星鸿娱乐平台js利用事件的阻止冒泡实现点击空白

  

[阻止冒泡,模态框]js利用事件的阻止冒泡实现点击空白模态框的隐藏

  很多时候,我们做前端的时候都会有这样的小功能,点击弹出某个框框,但是,有时候不想操作,就想点击某个空白处,隐藏该框框。假设如下场景,一个小按钮,点击可以弹出一个模态框。

  
  
就这么简单,但是我们想要点击空白部分的时候隐藏模态框,加入按钮id:btn,模态框id:model  
  
也许我们最简单的思路就是直接在document上监听一个事件,伪代码如下:  
  
按钮点星鸿娱乐击弹出事件监听:  
代码如下:

  
$("#btn").bind("click",function(e){  
if(e.stopPropagation){//需要阻止冒泡  
e.stopPropagation();  
}else{  
e.cancelBubble = true;  
}  
})  
  
代码如下:
  
$(document).bind("click",function(e){  
if(点击事件不在model上){  
隐藏模态框;  
}  
})  
  
乍一看,这是没有问题的,但是,其实有很多问题,首先,我们得注意阻止冒泡,否则,点击按钮,实际是触发了上面两个事件,modal是弹不出来的,其实是弹出来了,立马又隐藏了,而且,当我们在模态框上还有许多小控件的时候,我们对于模态框中的点击就很难进行判断。

  
  
这里,我认为有一种最经典的方法,很简单,但是很巧妙,  
  
首先,对于模态框监听一个事件如下:  
代码如下:

  
$("#modal").bind("click", function(event) {  
if (event && event.stopPropagation) {  
event.stopPropagation();  
} else {  
event.cancelBubble = true;  
}  
  
});  
  
只是简单阻止模态框中的点击事件冒泡,  
  
然后:  
代码如下:
  
$(document).one("click", function(e){  
var $target = $(e.currentTarget);  
if ($target.attr("id") != "modal") {  
$("#modal").css("display", "none");  
}  
});  
  
搞定,so easy

(责任编辑:admin)

上一篇:javascript 实现的类似hao123的多邮箱登录效果

下一篇:星鸿娱乐注册Get中文乱码IE浏览器Get中文乱码解决

推荐内容

客户服务热线

010-400-12345

在线客服