当点击DIV以外的地方,隐藏该DIV

最新推荐文章于 2022-10-28 16:09:27 发布
最新推荐文章于 2022-10-28 16:09:27 发布
阅读量357 收藏
点赞数
分类专栏： JavaScript 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_7612/article/details/82581718
版权

当点击DIV以外的地方,隐藏该DIV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>点击文字弹出层</title>
		<style type="text/css">
			<!--
			*{font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:14px}
			a{color:#039}
			a:hover{color:#f60}
			.pop{position:absolute;left:40%;top:40%;width:300px;height:100px;background:#eee;border:1px solid #ccc}
			.pop_head{position:relative;height:20px;background:#ccc}
			.pop_head a{position:absolute;right:8px;line-height:20px;color:#000;text-decoration:none}
			.pop_head a:hover{color:#f60;text-decoration:none}
			.pop_body{padding:8px}
			-->
		</style>
	</head>
	<body>
		<!--首先设置一个层:-->
		<div id="pop" class="pop" style="display:none">
			<div class="pop_head">
				<a href="javascript:void(0);" οnclick="hide()">关闭</a>
			</div>
			<div class="pop_body">
				谢谢光临……
			</div>
		</div>
		<!--弹出层的按钮:-->
		<a href="javascript:void(0);" οnclick="show();">弹出按钮</a>
		<script type="text/javascript">
			var EX = {
				addEvent : function(k, v) {
					var me = this;
					if (me.addEventListener)
						me.addEventListener(k, v, false);
					else if (me.attachEvent)
						me.attachEvent("on" + k, v);
					else
						me["on" + k] = v;
				},
				removeEvent : function(k, v) {
					var me = this;
					if (me.removeEventListener)
						me.removeEventListener(k, v, false);
					else if (me.detachEvent)
						me.detachEvent("on" + k, v);
					else
						me["on" + k] = null;
				},
				stop : function(evt) {
					evt = evt || window.event;
					evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
				}
			};
			document.getElementById('pop').onclick = EX.stop;
			var url = '#';
			function show() {
				var o = document.getElementById('pop');
				o.style.display = "";
				setTimeout(function() {
					EX.addEvent.call(document, 'click', hide);
				});
			}

			function hide() {
				var o = document.getElementById('pop');
				o.style.display = "none";
				EX.removeEvent.call(document, 'click', hide);
			}
		</script>
	</body>
</html>

 

iteye_7612
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery实现点击div以外的位置隐藏该div窗口
10-26
鼠标点击div外的地方让div窗口隐藏消失，实现方法有很多，在本文将为大家介绍下jquery中时如何实现的，感兴趣的朋友不要错过了哈
点击元素(div等)外,使元素隐藏的两种方法
m0_52948787的博客
05-11 4180
实现点击div元素之外 隐藏div 需求 需要使用元素失焦方法,但是div没有失去焦点的方法 给div元素添加tabIndex属性 <template> <div tabIndex="0" @blur="divBlur" v-show="activeId === '1'">1234</div> </template> <script setup> import { ref } from "vue"; function divBlur(){
点击div之外的地方，div隐藏
繁华是瑾的博客
05-10 956
对于一个div1，想要在点击div1的父元素 或者body元素的时候，使div1隐藏 文档 *{ margin:0; padding:0; } .div{ width:300px; height:300px; position:absolute; top:50px; left:100px; background
js实现点击div以外区域，隐藏div区域
weixin_44711440的博客
04-14 1983
页面刚开始刷新时，是显示的； 点击左侧按钮、其他区域或右侧关闭按钮都可以使其隐藏，再点击左侧按钮显示； 注：先引入jQuery版本 JS <script type="text/javascript"> $(function() { $('.showBtn').click(function(event) { //取消事件冒泡 event.stopPropagation...
点击div以外的地方隐藏
tiankongxiao的博客
11-24 850
$(document).on("click", function () { $(".myDiv").hide(); }); $(".myDiv").click(function (event) { event.stopPropagation(); //阻止事件向上冒泡 }); $(".mywww").click(function (event) { ...
Vue.component 点击 div盒子 外面区域控制隐藏
木辰風的博客
04-26 1824
Vue.component 点击 div盒子 外面区域控制隐藏 需求：选择审批意见（类似下拉框展示），可以删除单条数据
点击页面其它地方隐藏该div的两种思路
09-04
这两种思路都能有效地实现点击页面其他地方隐藏div的功能。选择哪种方式主要取决于个人喜好、项目需求以及对浏览器兼容性的考虑。思路一更注重于阻止事件传播，而思路二则是通过对事件源的检查来实现相同的效果。...
Javascript点击其他任意地方隐藏关闭DIV实例
01-21
代码如下，实现了点击input显示一个div层，当点击除input和div以外的地方的时候，隐藏div的功能。 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>点击其它地方关闭DIV&...
js点击页面其它地方将某个显示的DIV隐藏
10-28
当文档被点击时，调用`.language_list`的`hide()`方法来隐藏DIV。这样，只要用户点击了不是`.language_selected`的任何地方，DIV就会被隐藏。 3. **处理特殊情况**： 如果页面上有其他元素需要阻止事件冒泡，比如`...
html单机显示div,单击外部时单击并隐藏显示div
weixin_34737066的博客
06-10 329
我试图在点击一个链接后显示#subscribe-pop div,并在点击它之外的任何地方时隐藏它.如果我改变:我可以让它显示和隐藏:$('document').click(function() {至$('#SomeOtherRandomDiv').click(function() {HTML:Click here to show divmy content脚本:function toggle_vi...
点击div之外的地方就隐藏该div
UNI18660392930的博客
10-03 1186
效果：点击弹窗外任意一点，取消显示弹窗；这也是一个常用的效果 源码demo： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <script src="http:/...
html鼠标点击之后隐藏,鼠标点击某个div以外的地方就隐藏该div
weixin_35795675的博客
06-03 1036
鼠标点击某个div以外的地方就隐藏该div的功能很常见。适合情景：该div包含子元素(可以多级子元素)，该div中的每一个元素都有id。$(document).ready(function(){$(document).mousedown(function(event){if((event.target.id==""||$("#first").find("#"+event.target.id).le...
如何点击一个div盒子之外的部分，使这个div盒子关闭
qq_44705916的博客
10-28 2187
【代码】如何点击一个div盒子之外的部分，使这个div盒子关闭。
点击div层之外的其他地方关闭弹出层
夜轩14
12-10 2124
首先说一下关于closet()的知识，主要来自W3C closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。 语法 .closest(selector) 参数 描述 selector 字符串值，包含匹配元素的选择器表达式。 如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树...
Vue点击div以外的地方使div消失
who_become_gods的博客
04-30 2646
<div @click="judge=true">显示</div> <div v-show="judge" id="box"></div> created(){ document.addEventListener("click",e=>{ let box = document.getElementById("moreBox") if(!box.contains(e.target)){ this.judge = f
jQuery点击div以外的地方隐藏div
weixin_33933118的博客
11-07 159
jQuery点击div以外的地方隐藏div首先点击显示某个div，然后要求再次点击时消失，或者点击document的其他地方会隐藏掉这个层，涉及到冒泡的问题，阻止document冒泡到dom上。代码如下：var$el=$(".search-more,.article-query-listli"); $el.click(function(e){ e.stopPropa...
点击特定div之外的任何地方，该div隐藏
Andyの笔记
04-10 3224
* { padding:0; margin:0; } #box { position:relative; margin:50px; } #pop { display:none; position:absolute; left:200px; top:100px; width:120px; height:120px; border:2px solid #ccc; background:#e
jQuery实现鼠标点击div外的地方div隐藏
muzi0516的博客
01-13 5057
html css #big{ width: 500px; height: 500px; background-color: #000; } #small{ width: 50px; height: 50px; background-color: #f00; }js $("#big").on("tap", function(e) { if(e.target ==
vue2点击div以外的地方隐藏
最新发布
06-07
在 Vue2 中，可以通过监听全局点击事件，判断点击的元素是否在需要隐藏的范围内来实现点击 div 以外的地方隐藏。具体实现可以参考以下代码： ```html <div class="container" ref="container"> <div class="box...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值