JQuery中event的preventDefault和stopPropagation介绍
event.preventDefault()阻止默认事件行为的触发。
event.stopPropagation()防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>取消form表单提交或a打开的超连接</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("*").each(function (index, item) {
$(item).bind("click", function (event) {
output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id);//DOM2会产生冒泡
//取消form表单提交或a打开的超连接
window.alert("begin:" + event.isDefaultPrevented());
event.preventDefault();
window.alert("end:" + event.isDefaultPrevented()); //同样也支持取消事件冒泡
window.alert("begin:" + event.isPropagationStopped());
event.stopPropagation();
window.alert("end:" + event.isPropagationStopped());
});
});
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点击这里
<a id="link" href="http://www.baidu.com">超连接</a>
<form id="form" action="http://www.baidu.com">
<input id="submit" type="submit" value="submit"/>
</form>
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event05
JQuery中event的preventDefault和stopPropagation介绍的更多相关文章
- jquery中event对象属性与方法小结
JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的 ...
- 基于jquery中children()与find()的区别介绍
本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...
- jquery中attr和prop的区别介绍
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- jQuery中event.target和this的区别
http://www.cnblogs.com/hhsy/p/5647930.html 该链接有详细讲解
- jQuery中attr()与prop()区别介绍
.attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. •.attr( attributeName ) •.attr( attributeName ) ...
- 小议jQuery中的事件
学了jQuery这么长时间,到这里真的有一种柳暗花明又一村的感觉,在这里先表达一下自己学这一章节的happy心情吧(在严厉的金工实习老师眼皮底下偷偷学习,当然还有各种nerves~). 1加载DOM ...
- js中的preventDefault与stopPropagation详解
本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 首先讲解一下js中preventDefault和stopP ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- jquery中使用event.target的几点
jquery中使用event.target的几点 1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事 ...
随机推荐
- C++中List的用法
Lists将元素按顺序储存在链表中. 与 向量(vectors)相比, 它允许快速的插入和删除,但是随机访问却比较慢. assign() 给list赋值 back() 返回最后一个元素 begin() ...
- 【Dagger2】 案例大全
只有Inject是不可以的,必须有Component public class Test { @Inject Person person; private void test() { System.o ...
- python3 UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 30: illegal multibyte sequence
昨天用用python3写个日志文件,结果报错UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 30: ...
- ajax局部刷新一个div下的jsp
用AJAX刷新一个DIV中的jsp内容 <script type="text/javascript"> var xmlhttp; function startrefre ...
- 实战：INNOBACKUPEX for mysql 5.6自己主动还原脚本-v2
脚本再次更新,共享一下! #!/bin/sh # # 用法: # ./restore.sh /你备份文件的全路径 #ocpyang@126.com INNOBACKUPEX=innobackupex ...
- System.Net.Http.Formatting的nuget版本冲突问题
已经添加了nuget Microsoft.AspNet.WebApi.Client 调用System.Net.Http.HttpClient.PostAsJsonAsync的时候报如下的错误: C ...
- SharePoint 2013网站突然不能登录了。
SharePoint 2013网站突然不能登录了,访问的时候,总是报错: The list has not shared with you. 原因: 原来我不知道什么时候把web applicat ...
- 【PHP 】 伪静态 - 3. 伪静态的基本使用
原理图: 原先浏览器输入的网址会发送到apache服务器,然后apache会调用php模块来处理,最后找到你所想访问的页面; 如果在apahce, httpd.conf文件中开启rewrite机制,则 ...
- 在Foreda8上试安装Apchehttpd-2.4.6.tar.gz
下文是我边试边做的记录,不保证内容的完整性和正确性. 由于我的Apsire机器是最简安装Foreda8,所以需要安装httpd,熟悉一遍也是很好的嘛. 我从网上搜罗并下载了apchehttpd-2.4 ...
- MyEclipse开发Rest服务入门
MyEclipse支持Rest服务,开发起来非常方便,下面我就举一个计算机的例子: 实现功能:加.减.乘.除: 效果如下: Rest服务要点:每个服务或任何东西都有一个URI: 步骤1:创建Web S ...