如何使用JavaScript(非jQuery)实现点击页面空白后关闭弹窗?
怪我咯
怪我咯 2017-04-10 15:30:17
[JavaScript讨论组]

类似的问题在这里:http://segmentfault.com/q/1010000000452465

/* Mark 1 的原理:
判断点击事件发生在区域外的条件是:
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/

我明白这个原理,但是如何判断点击的区域是否是目标区域的子元素呢?

因为项目要求,只能使用JavaScript实现。

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(3)
阿神

补充一种做法并不使用contains,而是利用事件冒泡。 在出现弹窗(是指同一页面的浮层吧?)的同时,给document绑定点击事件,在事件处理函数内关闭这个弹窗。然后,也给这个弹窗元素绑定一个点击事件,在事件处理函数内阻止冒泡(event.stopPropagation()event.cancelBubble=true)。

因为页面内任何地方的点击,正常都可以冒泡到document,然后关闭这个弹窗。然后只有弹窗阻止了这个冒泡,所以也达到了仅点击弹窗(及其子元素)之外的空白区域来关闭弹窗。

PHP中文网
if ((目標區域).contains(e.target)) ...
大家讲道理

其实可以加一个遮罩层。。弹窗在遮罩层之上,其他在遮罩层之下,这样你只要点击遮罩层就会关闭弹窗。。很多框架都是这么实现的

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号