jQuery高级之能力检测

最新推荐文章于 2022-08-02 18:03:42 发布

服务器端的cookie

最新推荐文章于 2022-08-02 18:03:42 发布

阅读量241

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_35854462/article/details/70495365

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.取消事件冒泡

具体效果：点击小div不触发大div的事件

具体代码如下

<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<style type="text/css">
#mybigdiv {
	width: 300px;
	height: 300px;
	border: 1px solid red;
}

#myid {
	width: 100px;
	height: 100px;
	border: 1px solid red;
}
</style>

<script type="text/javascript">
			
			   
				  //取消事件冒泡
				  //第一道能力检测:分浏览器
				 
				 /*
				  event=event||window.event;
				   if(event.stopPropagation){
					   event.stopPropagation();
				   }else{
						event.cancelBubble=true;
				 }*/
				 
				
				$(function(){
					//给大div注册事件
					$("#mybigdiv").click(function(){
						alert('我是大div');
					});
					
					//小div
					$("#myid").click(function(event){
						alert('我是小div');
						//UI工程师  能力检测
						//判定浏览器引擎是IE还是其他浏览器(第一道能力检测)
				 	  event=event||window.event;
					//第二道能力检测    
					//阻止事件冒泡 
					   if(event.stopPropagation){//非IE浏览器  chrome
					   	
						   event.stopPropagation();
					   }else{
					   	//IE浏览器
							event.cancelBubble=true;
					 }
						});
				});
				
		</script>
</head>
<body>
	<div id="mybigdiv">
		我是大div
		<div id="myid">我是小div</div>
	</div>
</body>

2阻止之后事件的继续

具体效果：阻止超链接访问百度页面

具体代码如下

<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript">
			
			$(function(){
			//获取使用事件的对象
				$("#myhref").click(function(event){
					//能力检测
					//判断浏览器是IE浏览器还是非IE浏览器
				event=event||window.event;
				//阻止事件的继续
				if(event.preventDefault){  //非IE下内核 webkit引擎
					event.preventDefault();
				}else{
					event.returnValue=false; //IE引擎
				}
				
				});
			});
				
			
		</script>

</head>
<body>
	<a id="myhref" href="http://www.cnblogs.com">去百度</a>
</body>

服务器端的cookie

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery高级之能力检测

1.取消事件冒泡具体效果：点击小div不触发大div的事件具体代码如下#mybigdiv { width: 300px; height: 300px; border: 1px solid red;}#myid { width: 100px; height: 100px; border: 1px solid red;}
复制链接

扫一扫

专栏目录