jq弹框——组织冒泡

最新推荐文章于 2020-11-13 10:14:36 发布
最新推荐文章于 2020-11-13 10:14:36 发布
阅读量465 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Anansoul/article/details/86492395
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器弹框</title>
	<style type="text/css">
		.pop_con{
			display: none;/*默认不显示，用定时器显示*/
		}
		.pop{
			width: 400px;
			height: 300px;
			background-color: #fff;
			border: 1px solid #000;
			position: fixed;/*使用固定定位*/
			left: 50%;/*左上角位于页面中心*/
			top: 50%;
			margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
			margin-top: -150px;
			z-index: 9999;/*弹窗在最前面*/
		}
		/*遮罩样式*/
		.mask{
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: #000;
			left: 0;
			top: 0;
			/*设置透明度30%，兼容IE6、7、8*/
			opacity: 0.3;
			filter: alpha(opacity=30);
			z-index: 9990;/*遮罩在弹窗后面*/
		}
	</style>
	<script type="text/javascript" src="无压缩.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#btn').click(function() {
				$('#pop').show();
				return false;
			});
			$('#shutoff').click(function() {
				$('#pop').hide();
			});
			//点弹框以外的地方，也能让弹框消失
			$(document).click(function(){
				// setTimeout(function(){
				// 	$('#pop').hide();
				// },2000);
				$('#pop').hide();
			});
			$('.pop').click(function() {
				return false;
			});
			
			//阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）
			$('#link1').click(function() {
				return false;
			});
		});
	</script>
</head>
<body>
	<!-- <h1>首页标题</h1>
	<p>页面内容</p>
	<a href="http://www.baidu.com" id="link1">百度网</a> -->
	<input type="button" name="" value="弹出" id="btn">

	<div class="pop_con" id="pop">
		<div class="pop">
			<h3>提示信息！</h3>
			<a href="#" id="shutoff">关闭</a>
			<input type="text" name="">
		</div>
		<!-- 遮罩层 -->
		<div class="mask"></div>
	</div>
</body>
</html>
qw1ko~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery阻止（默认）事件冒泡
IT界泥石流
06-15 9669
1.事件冒泡     事件冒泡就是，你在执行元素点击事件的时候同时也会触发到此元素的其前辈元素的点击事件，从而可能造成一定程度上的程序混乱现象，为了避免这种情况的出现，现在我们可以使用阻止事件冒泡。   阻止事件冒泡：even.stopPropagation();//不触发除本身之外的其他任何控件的事件          【案例】   定义两个div，第一个div里嵌套一个span标签，没以个di...
jq事件冒泡
yangyixue123的博客
07-19 3390
事件冒泡：当一个事件发生时，该事件总共有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。 当事件发生时，这个事件就要开始传播，从而能够达到处理这个事件的代码中，（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。 当事件在传播的过程中，找到了一个能够处理它的函数，此时可以说这个函数捕捉到了这个事件。那一个函数是如何捕捉一
JQuery 阻止事件冒泡---3种实现方式
Nick.Peng's Blogs
09-20 7763
第一种：return false： 缺点：直接返回了函数，函数后面的语句没法执行了； $('.btn').on('click',function(event){ do something ... return false }) 第二种：event.stopPropagation()： 1、阻止事件冒泡这里以click事件为例 <divclass="b...
jquery的冒泡
qq_42980244的博客
05-30 228
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 我们在平时的开发过程中，肯定会遇到在一个元素包裹一个元素的情况，但是呢，在这两个元素上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。 如下，如果给span添加了点击事件，也给div添加了点击事件，span在div中，span触发点击事件，外层包裹的div也会触发点击事件。此时我们就要用到阻止冒泡。 <div> <span>a
jq阻止冒泡事件
忘川
11-01 813
if(window.event){//IE下阻止冒泡 event.cancelBubble = true; }else{ event.stopPropagation(); }
jq阻止事件冒泡和默认行为的方法
lifewinner1992的博客
05-12 6643
$("#btn").click(function(event){    event.stopPropagation(); //1.停止事件冒泡，但是不会阻止默认行为    return false; // 2.阻止事件冒泡，也阻止了默认行为    event.preventDefault(); // 3.阻止默认行为，不阻止事件冒泡});...
jQuery阻止冒泡事件的方法
weixin_45676431的博客
04-07 2287
jQuery提供了两种阻止冒泡事件的方法 方式一、event.stopPropagation() $(’#div1’).mousedown(function(event){ event.stopPropagation(); }); 方式二、return false $(’#div2’).mousedown(function(event){ return false; }); 注意： return ...
jq 弹框 即时聊天 聊天工具
05-25
【标题】"jq 弹框 即时聊天 聊天工具" 提供的是一个基于jQuery的即时聊天界面实现，其设计灵感来源于QQ，具备基本的弹框功能，可作为开发类似应用的基础模板，允许开发者根据自身需求进行定制和调整。 在即时聊天...
linux解析json工具——jq
09-16
linux下解析json数据的一个工具包。是一个可执行文件，下载后放到某个目录中就可直接使用。详见：https://www.ibm.com/developerworks/cn/linux/1612_chengg_jq/index.html
jquery_tips，JQ实现的冒泡提示
03-23
《JQuery实现冒泡提示的技巧与应用》 在网页开发中，为了提供更好的用户体验，开发者经常需要在用户与页面元素交互时显示一些提示信息。jQuery的tips功能恰好能满足这一需求，它允许我们轻松地创建出具有冒泡效果的...
JQ 事件冒泡
08-13
本文将深入探讨"JQ事件冒泡"这一关键概念，结合具体的代码示例（见demo文件）来帮助理解。 事件冒泡是事件处理的一个重要机制，它源于事件在DOM树中的传播方式。当一个事件（如点击）在某个元素上触发时，该事件...
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
JQuery中阻止事件冒泡方式及其区别
热门推荐
JeamKing的专栏
02-27 29万+
JQuery 提供了两种方式来阻止事件冒泡。方式一：event.stopPropagation();        $("#div1").mousedown(function(event){            event.stopPropagation();        });方式二：return false;        $("#div1").mousedown(
jquery阻止事件冒泡及解决办法 live
千里客的博客
09-13 1万+
动态添加标签的live事件注：jquery版本1.8之后不在支持live事件 在实际项目中遇到的问题，动态添加的标签 live阻止冒泡失效，无论是用return false还是用e.stopPropagation()都不能阻止冒泡发生 以下是自己总结的例子 html<div id="box"> <a href="javascript:;" class="delete">init
jQuery阻止向上冒泡事件
fangfengzhen115的专栏
05-11 3800
jQuery阻止向上冒泡
JQ--阻止点击事件冒泡
xiao白的博客
11-13 1251
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>阻止点击事件冒泡</title> <style> .father { width: 400px;.
jq阻止事件冒泡（点击子级不触发父级）的两种方法
qq_35181466的博客
06-19 5255
方法1 function addFocus() { var e=window.event || arguments.callee.caller.arguments[0]; e.preventDefault(); e.stopPropagation() ; } 方法2 $("#addFocus").click(function(event){ event.stop...
jq效果 点击隐藏和显示（组织冒泡事件）
akang4152的博客
08-22 252
一个button按钮，当我点击button后弹出DIV层， 当我点击DIV层以外的地方时候把DIV隐藏 大概代码如下： <input type="button" id="js_button" /> <div id="js_div" style="width: 100px; height: 100px; display: none"> ...
JQuery阻止冒泡事件on绑定中异常情况分析
Alfred的博客
09-09 3309
本文转载自https://www.cnblogs.com/tengj/p/4794947.html，纯粹作为日常笔记使用 科普下事件冒泡以及默认行为,以下面例子举列子：     事件冒泡：当点击内部button元素时，会触发自身及外层 a的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。                        事件冒泡可能会引起意料之外的效...
JQ8400-FL语音模块技术详解与应用
"JQ8400-FL语音模块是一款功能丰富的语音处理模块，支持MP3和WAV格式的硬件解码，适用于多种应用场景，如车载导航、语音提示等。该模块具备高音质输出，支持多种控制模式和丰富的功能，如曲目选择、音量调节、播放...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值