文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

js利用事件的阻止冒泡实现点击空白模态框的隐藏_javascript技巧

php中文网
发布： 2016-05-16 17:02:39
原创
1218人浏览过

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

就这么简单，但是我们想要点击空白部分的时候隐藏模态框，加入按钮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
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JS将所有对象s的属性复制给对象r(原生js+jquery)_javascript技巧 下一篇：JS操作字符串转换为数值并取整的代码_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
js如何检测网络延迟 前端网络延迟检测实现方法 检测JavaScript中网络延迟的核心方法是利用时间戳记录请求往返时间。具体步骤为：1.使用fetch或XMLHttpRequest发送请求前记录开始时间；2.收到响应后记录结束时间；3.计算两者差值得到延迟。此外，可采用多次测量取平均值、选择小资源、避免缓存、后台执行等策略提高准确性。延迟结果可用于动态加载资源、优化网络请求、提供更好用户体验等场景。
2025-06-13 15:51:01
934
js如何实现文字选中高亮 文本高亮的5种实现技巧！ js实现文字选中高亮的核心在于监听mouseup事件并获取Selection信息，再用span包裹选中文字添加样式。1.处理重叠高亮时可采用分割策略，仅高亮未覆盖部分；2.实现撤销功能需记录高亮信息并移除对应span；3.跨标签高亮需遍历节点并分割文本节点；4.性能优化可通过减少DOM操作、使用CSS和懒加载等方式；5.兼容不同浏览器可借助polyfill和特性检测。上述策略需综合考虑用户体验与性能平衡。
2025-06-13 13:54:01
501
js中if判断如何实现短路评估 短路评估是JavaScript中逻辑运算符&&和||的特性，当第一个操作数能确定结果时，不再执行后续表达式。1.&&运算符在第一个操作数为false时直接返回false，不执行第二个操作数；2.||运算符在第一个操作数为true时直接返回true，不执行第二个操作数。这种机制可用于避免访问不存在的对象属性、提供默认值及简化条件判断，例如letcity=user&&user.address&&user.address.city防止报错，或letname=userName||"Guest"设置默认值
2025-06-13 13:27:01
218
JS如何检测屏幕旋转角度 3种设备方向检测方案适配横竖屏 屏幕旋转角度检测可通过三种方案实现并兼容处理1.screen.orientationAPI为现代浏览器推荐方案可获取具体角度和类型但兼容性差2.window.orientation适用于老旧移动端设备返回方向值但已被废弃3.window.matchMedia通过媒体查询判断横竖屏适合响应式设计但无法获取具体角度兼容性问题可通过优先级选择处理先尝试screen.orientation不支持则window.orientation最后window.matchMedia同时resize事件频繁触发时可用
2025-06-13 12:24:01
965
js怎样实现文字转语音 Web Speech API语音合成 JavaScript中实现文字转语音最直接的方式是使用WebSpeechAPI的SpeechSynthesis。1.通过创建SpeechSynthesisUtterance对象并调用speechSynthesis.speak()方法实现基础语音合成；2.使用volume、rate、pitch属性分别控制音量（0-1）、语速（默认1）和音调（默认1）；3.通过speechSynthesis.getVoices()获取可用语音列表，并异步设置voice属性以切换语音；4.WebSpeechAPI的局
2025-06-12 23:57:01
441
js如何操作Web Audio API Web Audio API的6个常用功能 WebAudioAPI是浏览器中处理和合成音频的核心工具，其关键在于AudioContext，通过创建并连接各种节点实现音频处理链。它的6个常用功能包括：1.音频源（如AudioBufferSourceNode）；2.音频效果（如GainNode、BiquadFilterNode）；3.音频分析（AnalyserNode）；4.音频空间化（PannerNode）；5.音频合成（OscillatorNode）；6.音频目标（AudioContext.destination）。使用时需先创建Audi
2025-06-12 23:12:01
441
js怎样计算字符串长度 js字符串计算的6个常用方法 JS中字符串长度计算有多种方法，需根据场景选择。①length属性最简单但可能错误处理Unicode字符；②split()方法分割字符串为数组后统计长度；③Array.from()能正确处理如emoji等Unicode字符；④正则表达式可用于匹配特定字符后统计；⑤循环遍历可自定义规则计算长度；⑥Intl.SegmenterAPI实验性支持更精确的文本分割。JS字符串内部以UTF-16编码存储，length返回代码单元数量，对增补字符如emoji会出错，需用Array.from()或Intl.Se
2025-06-12 22:51:01
962
JS中的try...catch有什么用？如何处理错误？ try...catch用于捕获和处理JavaScript中同步代码的运行时错误，防止程序崩溃。其结构为：try{执行可能出错的代码}catch(error){处理错误}，若try无错误则catch不执行；例如访问未定义变量时可捕获异常并输出错误信息；JavaScript常见错误类型包括Error、TypeError、ReferenceError、SyntaxError（无法被捕获）、RangeError等，可通过error.name或instanceof区分；finally块无论是否发生错误都会
2025-06-12 22:39:01
624
JS中的事件冒泡是什么？如何阻止？ 事件冒泡是JavaScript中事件从子元素向祖先元素逐级触发的传播机制。当你在嵌套结构中点击一个元素，事件会从目标元素开始向上冒泡，依次触发父元素的同类型事件，默认情况下大多数事件在冒泡阶段执行。例如点击按钮时，先执行按钮的点击处理函数，再执行外层div的点击处理函数。要阻止事件冒泡，可以使用event.stopPropagation()方法，它阻止事件继续向上传播但不影响当前元素其他监听器的执行；若同时想阻止默认行为，还需使用event.preventDefault()。实际开发中，如菜单弹
2025-06-12 21:36:02
689
js怎样实现模态框弹出 js实现模态框的4种交互设计方案 实现模态框的核心在于控制HTML元素的显示隐藏及交互逻辑，1.HTML结构需包含遮罩层与内容区域；2.CSS设置初始隐藏及弹出样式；3.JavaScript控制显示、隐藏及交互事件。四种实现方案分别为：基础模态框通过display属性切换显隐；动画模态框使用transition与类控制动画；事件委托优化多按钮场景；Promise模态框返回异步结果。兼容性方面需注意旧浏览器对classList、position:fixed及CSS动画的支持问题。可借助jQueryUI、Bootstrap等库简化实
2025-06-12 17:57:01
893
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

  • 返回顶部