JQ 事件对象的属性

onestopweb

浏览: 689435 次

最近访客更多访客>>

vincepisces

heishehui

wtomato

hushouhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

阅-JQ3

demo.html

<html>
<head>
<title>event.type</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
$(function(){
	$("a").click(function(event) {
		alert(event.type); //获取事件类型
		return false; //阻止链接跳转
	});
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>

效果图：

demo2.html

<html>
<head>
<title>event.target</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
$(function(){
	$("a").click(function(event) {
		alert(event.target.href); //获取触发事件的<a>元素的href属性值
		return false; //阻止链接跳转
	});
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>

效果图：

demo3.html

<html>
<head>
<title>event.pageX event.pageY</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
$(function(){
	$("a").click(function(event) {
		alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
		return false;//阻止链接跳转
	});
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>

效果图：

demo4.html

<html>
<head>
<title>event.which</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
$(function(){
	$("a").mousedown(function(e){
		alert(e.which)  // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
		return false;//阻止链接跳转
	})
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>

效果图：

demo5.html

<html>
<head>
<title>event.which2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
$(function(){
	$("input").keyup(function(e){
		alert(e.which);
	})
})
</script>
</head>
<body>
<input />
</body>
</html>

效果图：

demo6.html

<!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>
<title>event.metaKey</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
$(function(){
	$("input").keyup(function(e){
		alert(e.metaKey +" "+e.ctrlKey );
		$(this).blur();
	})
})
</script>
</head>
<body>
<input type="text" value="按住ctrl键，然后再点其他任何键" style="width:200px"/>
</body>
</html>

效果图：