锋利的jquery学习之二_H5之家 - 中国HTML5教程资源分享第一站

关于事件 1.阻止默认行为

网页中的元素有自己的默认行为，例如表单有提交，点击超链接会跳转等等。有时候就非常需要阻止默认行为的启动，例如避免跳转。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
用户名：<input type="text"/>
<input type="submit" value="submit"/>
</form>
<div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$().ready(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val();
if(username == ""){
$("#msg").html("<p>文本框的值不能为空。</p>"); //直接插入html语句
event.preventDefault(); //阻止默认表单提交行为
}
})
});
</script>
</body>
</html>

如果想同时阻止冒泡和默认行为，可以在事件处理函数中返回false

将 event.preventDefault(); 改成 return false;

这里就是经常看到别人js代码里面为什么突然写return false的原因了。

jquery并不支持事件捕获，需要使用原生的javascript

2.事件对象属性

jquery对事件对象进行了封装，使得事件处理在各种浏览器下都可以正常运行而不需要进行浏览器类型判断

1. event.type

该方法可以获取到事件的类型

$("a").click(function (event) {
alert(event.type); //获取事件类型
return false; //阻止链接跳转
})

2. event.preventDefault() 方法

阻止默认行为

3. event.stopPropagation() 方法

阻止事件冒泡

4. event.target

获取触发事件的元素

$("a[href='http://www.baidu.com']").click(function (event) {
var tg = event.target;
alert(tg.href);
return false; // 阻止链接跳转
})

5. event.pageX 和Y

获取光标相对于页面的x和y坐标

$("a").click(function (event) {
alert("current mouse position:" + event.pageX + "," + event.pageY);
return false;
})

其他暂时甚少用到，所以跳过，详细参考jquery的event文档

本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计精通javascript javascript教程

分页：12

转载请注明
本文标题：锋利的jquery学习之二
本站链接：
分享请点击：

1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。

登录后可拥有收藏文章、关注作者等权限...

注册登录