12、jQuery的事件对象使用示例

Sian · 发表于 2016-2-21 10:52:38

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<style type="text/css">
			html,body{
				text-align: center;
				font-size: 20px;
			}
			div{
				margin: 0 auto;
				border: 1px solid black;
			}
			#cn{
				float: left;
				margin: 50px;
				width: 420px;
				height: 340px;
				line-height: 40px;
			}
			#bj{
				width: 340px;
				height: 260px;
			}
			#hd{
				width: 260px;
				height: 180px;
			}
			#ppc{
				width: 180px;
				height: 75px;
			}
			#usa{
				float: left;
				margin: 50px;
				width: 420px;
				height: 340px;
			}
			
		</style>
		<script>
			$(document).ready(function(){
			/* 点击事件示例
				// mydata可以做为参数传入到事件中去
				var mydata = {name:"sian"};
				$('div').click(mydata, function(event){
					// 事件流特性，div中所有的子控件都会响应事件
					console.log(event.data.name);
				});
			*/
			/* 事件对象示例
				// pageX pageY鼠标的相对位置，相对于浏览器左上角（0，0）点
				$('#ppc').click(function(event){
					console.log("鼠标位置："+event.pageX+","+event.pageY);
				});
				// relatedTarget，事件的相关目标，ppc的相关目标是hd
				$('#ppc').mouseover(function(event){
					console.log(event.relatedTarget);
				});
				// target与currentTarget的区别
				$('#ppc').click(function(event){
					// 4次都是ppc.id
					console.log(event.target.id);
					// 4次不同的id
					console.log(event.currentTarget.id);
				});
			*/
			/*
				$('#ppc').click(function(event){
					console.log(event.timeStamp);	// 时间戵
					console.log(event.type);		// 事件类型
					console.log(event.which);		// 事件主体
				});
			*/
			
			// Propagation 事件传播
				$('div').click(function(event){
					// 是否阻止冒泡传递
					// 阻止默认事件但不阻止冒泡
					event.preventDefault();
					console.log(event.isDefaultPrevented());
					// 阻止冒泡传递但不阻止默认事件
					event.stopPropagation();
					console.log(event.isPropagationStopped());
					// 阻止后面的事件函数执行,
					event.stopImmediatePropagation();
				})
				$('#ppc').click(function(){
					$(this).css('background', 'red');
				})
			});
		</script>
	</head>
	<body>
		<div id="cn">
			<span>中国</span>
			
			<div id="bj">
				<span>北京</span>
				
				<div id="hd">
					<span>海淀</span>
					
					<div id="ppc">
						<span><a href="http://www.baidu.com">[url]www.ppc.com[/url]</a></span>
						
					</div>
				</div>
			</div>
		</div>
		<div id="usa">
			<span>美国</span>
		</div>
	</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 12、jQuery的事件对象使用示例