jQuery复杂条件触发关闭弹出层(输入框弹出插件层)
经常碰见的一种弹出层的情况是,在一个输入框中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
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。
本文地址:http://www.roammemo.com/html5/188.html
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。