扫码关注官方订阅号
结构大概样子是这样的
test1 test2 test3
你要实现的效果:气泡提示 1.点击某个目标显示气泡;2.点击气泡自身内容不隐藏;3.点击气泡以外的地方隐藏
分析:写document的点击事件隐藏气泡,而点气泡不影藏,则在气泡的点击事件阻止冒泡
document
阻止冒泡
以jQuery的环境来写
jQuery
//点击显示 $('#create-tag').click(function (e) { $('#tags-list').show(); //阻止冒泡 if (e && e.stopPropagation) { e.stopPropagation() } else { window.event.cancelBubble = true } setTimeout(function () { //阻止冒泡 即点击自身内容不影藏 $('#tags-list').click(function (e) { if (e && e.stopPropagation) { e.stopPropagation() } else { window.event.cancelBubble = true } }); //点击空白影藏 $(document).on('click', function () { //隐藏 $('#tags-list').hide(); //并且删除该点击事件 $(document).off('click', arguments.callee); }); }, 200) });
这种需求一般是在写弹窗点击空白地方自动隐藏用得比较多,另外打个广告,jz弹窗插件
假定你说的指定元素是 #tags-list
document.body.onclick=function () { if(event.target.id !== 'tags-list'){ document.getElementById('tags-list').style.display = 'none'; } }
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
你要实现的效果:气泡提示 1.点击某个目标显示气泡;2.点击气泡自身内容不隐藏;3.点击气泡以外的地方隐藏
分析:写
document的点击事件隐藏气泡,而点气泡不影藏,则在气泡的点击事件阻止冒泡以
jQuery的环境来写这种需求一般是在写弹窗点击空白地方自动隐藏用得比较多,另外打个广告,jz弹窗插件
假定你说的指定元素是 #tags-list