Blogger Information
Blog 250
fans 3
comment 0
visits 321530
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery--location和事件冒泡阻止
梁凯达的博客
Original
1269 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery 事件</title>

	<script src='jquery-3.3.1.min.js'></script>

	<style>
		#out{
			width:300px;
			height:300px;
			background: blue;
			border-radius: 50%;
			position:absolute;
		}

		#mid{
			width:200px;
			height:200px;
			background: yellow;
			border-radius: 50%;
			position: absolute;
			left:50px;
			top:50px;

		}

		#inr{
			width:100px;
			height:100px;
			background: purple;
			border-radius: 50%;
			position: absolute;
			left:50px;
			top:50px;

		}
	</style>
</head>
<body style='height:2000px;width:2000px'>
	<a href="http://www.baidu.com" id='as'>点击百度</a>

	<div id='out'>
		<div id='mid'>
			<div id='inr'></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$('#as').click(function(){
		//jquery中使用location格式
		//location.href = ''
		location.href = 'http://www,baidu.com';
		
		//replace
		//replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
		//此处用于替换掉replace
		location.replace('http://www.sina.com.cn');
		//return false用于阻止默认行为
		//如果会产生事件蔓延或事件冒泡,使用return可以组织该事件冒泡或事件蔓延
		return false;
		//事件冒泡/蔓延,是指设置了一个总体集合给定了某些样式,而子元素的样式也被影响
		//使用return false 的方式,可以有效的阻止时间冒泡;
		$('div').click(function(){
			$(this).css('background','pink');
			return false;
		})
	})
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post