你的位置: 首页 > HTML5网站开发 > 正文
jQuery复杂条件触发关闭弹出层(输入框弹出插件层)
作者:漫游   分类: HTML5网站开发    时间:2017-1-9 17:18   热度:2712°   字号:        评论:0 
作者:漫游   分类: HTML5网站开发    时间:2017-1-9 17:18   热度:2712°  评论:0 条 

经常碰见的一种弹出层的情况是,在一个输入框中click或focus时触发弹出层,然后在弹出层中操作或继续在输入框中操作,都不会关闭弹出层,而当点击二者以外的地方就会触发关闭事件。类似的应用场景还有很多,不举例。

如果只是为弹出层以外的地方点击就触发关闭事件,这个好说,在弹出层下方加一个全屏幕的透明遮罩层,点击到它就触发关闭事件即可。而在本文的情况中,不能触发关闭事件的地方有2个,要怎样处理呢?我们先做个实际情况看看,在页面中为输入框input、弹出层layer、页面body都添加点击事件,并用console.log来提示,这时候点击input或layer都会触发2个事件。在body的点击事件中添加关闭程序功能,那么点击input或layer也会触发,要想只执行input 或layer的点击事件而不执行body的点击,就要用到stopPropagation阻止事件冒泡,可看下面绑定事件部分的代码。

如果不止一个输入框能触发functionOpen,那么应该动态的为点击的输入框添加一个标记用样式,例如.input,用来使得绑定事件正确作用在目标对象上。

添加绑定事件:

$(document).on("click", ".input", function( event ) {
	console.log("input");
	event.stopPropagation();
})
$(document).on("click", ".layer", function( event ) {
	console.log("layer");
	event.stopPropagation();
})
$(document).on("click", "body", function( event ) {
	console.log("body");
	functionClose();//关闭
})


关闭层functionClose:

$(document).off("click", "body");//解绑事件
$(".input").removeClass("input");//移除标记样式
layer.close();//关闭层伪代码


打开层functionOpen:

$(".input").addClass("input");//添加标记样式


结尾


瞧瞧上一篇文章去!   瞧瞧下一篇文章去!
本文标签: javascript
二维码加载中...
本文作者:漫游      文章标题: jQuery复杂条件触发关闭弹出层(输入框弹出插件层)
本文地址:http://www.roammemo.com/html5/188.html
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。
返回顶部    首页    手机版本   
版权所有:漫游的备忘录    站长: 漫游    模板基于:博闻广记 v1.2   程序:emlog