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介绍的更多相关文章

  1. jquery中event对象属性与方法小结

    JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的 ...

  2. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  3. jquery中attr和prop的区别介绍

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  4. jQuery中event.target和this的区别

    http://www.cnblogs.com/hhsy/p/5647930.html    该链接有详细讲解

  5. jQuery中attr()与prop()区别介绍

    .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. •.attr( attributeName ) •.attr( attributeName ) ...

  6. 小议jQuery中的事件

    学了jQuery这么长时间,到这里真的有一种柳暗花明又一村的感觉,在这里先表达一下自己学这一章节的happy心情吧(在严厉的金工实习老师眼皮底下偷偷学习,当然还有各种nerves~). 1加载DOM ...

  7. js中的preventDefault与stopPropagation详解

    本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 首先讲解一下js中preventDefault和stopP ...

  8. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  9. jquery中使用event.target的几点

    jquery中使用event.target的几点 1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事 ...

随机推荐

  1. Android开发之Navigationdrawer导航抽屉功能的实现（源码分享）

    导航抽屉(navigationdrawer)是一个从屏幕左边滑入的面板,用于显示应用的主要导航项目.用户能够通过在屏幕左边缘滑入或者触摸操作栏的应用图标打开导航抽屉. 导航抽屉覆盖在内容之上,但不覆盖 ...

  2. Objective-C:动态绑定

    // Complex.h // 03-动态绑定 // // Created by ma c on 15/8/11. // Copyright (c) 2015年. All rights reserve ...

  3. 第一章 HttpClient的使用

    1.http协议(这一块儿有时间的话会做记录) 2.常用的两种RPC方式 基于http协议:HttpClient和JDK自己的Http操作类 基于TCP或UDP协议:mina2和netty(这一部分以 ...

  4. go语言之进阶篇成员操作

    1.成员操作 示例: package main import "fmt" type Person struct { name string //名字 sex byte //性别, ...

  5. java 解析 XML实例

    package com.hseact.fecp.servlet; import java.io.IOException; import javax.xml.parsers.DocumentBuilde ...

  6. Android -- ViewPager放入多个XML监听每个的控件

    我这这里就用了两个imageButton的监听器,两个XML上分别一个. 昨天做了个Viewpager,今天想试试在上面弄上Button试试,结果,弄不来,然后查文档,没查到...百度了1个多小时才出 ...

  7. [Algorithm] Meeting hour optimization (Kanpsack problem) and Dynamic programming

    For example we have array of meeting objects: const data = [ { name: }, { name: }, { name: }, { name ...

  8. hbase-0.94安装方法具体解释

    先决条件:     1)java环境,须要安装java1.6以上版本号     2)hadoop环境.因为HBase架构是基于其它文件存储系统的,因此在分布式模式下安装Hadoop是必须的,可是,假设 ...

  9. 微信小程序 - 上拉加载下拉刷新

    点击下载示例:小程序 - 上拉刷新下拉加载

  10. Linux安装 微信开发者工具(deepin linux ubt)

    一.环境:: deepin linux15.4.1 二.安装过程: 2.1 安装wine sudo apt-get install wine 2.2 安装nwjs-sdk 2.2.1 下载linux版 ...