jQuery 事件对象的属性和方法

最新推荐文章于 2018-03-19 18:06:05 发布

aimartt

最新推荐文章于 2018-03-19 18:06:05 发布

阅读量2.1k

点赞数 1

分类专栏： jQuery 文章标签： jquery function html string div path

本文链接：https://blog.csdn.net/aimartt/article/details/7860662

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery 事件对象的属性和方法

参考资料：
《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

1、event.type：获取事件的类型

2、event.target：获取触发事件的元素

3、event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

4、event.preventDefault() 方法：阻止默认行为

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				$("a").click(function(event) {
					alert(event.type);	//获取事件类型（此处弹出 click）
					alert(event.target.href);		//获取触发事件的元素的 href 属性值
					alert("当前鼠标坐标：" + event.pageX + ", " + event.pageY);	//获取鼠标当前坐标
					event.preventDefault();		//阻止链接跳转
				});
			});	
		</script>  	
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<a href="http://www.google.com/">Google</a>
  	</body>
</html>

5、event.stopPropagation() 方法：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//为 <span> 元素绑定 click 事件
				$("span").click(function() {
					$("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
				});
				//为 Id 为 content 的 <div> 元素绑定 click 事件
				$("#content").click(function(event) {
					$("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
					event.stopPropagation();	//阻止事件冒泡
				});
				//为 <body> 元素绑定 click 事件
				$("body").click(function() {
					$("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
				});
			});
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			#content {
				background: #b17af5;
			}		
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<div id="content">
  			外层div元素<br />
  			<span style="background: silver;">内层span元素</span><br />
  			外层div元素
  		</div><br />
  		<div id="msg"></div>
  	</body>
</html>

6、event.which：获取在鼠标单击时，单击的是鼠标的哪个键

<script type="text/javascript">
	$(function() {
		$("body").mousedown(function(event) {
			//1：鼠标左键；2：鼠标中建；3：鼠标右键
			alert(event.which);	
		});
	});	
</script>

aimartt

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 事件对象的属性和方法

jQuery 事件对象的属性和方法参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社1、event.type：获取事件的类型2、event.target：获取触发事件的元素3、event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标4、event.preventDefault() 方法：
复制链接

扫一扫

专栏目录