1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

1
2
3
4
5
6
7
8
9
10
11
$("form").bind(
 
  "submit",
 
  function() {
 
    return false;
 
   }
 
);

2、通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

1
2
3
4
5
6
7
8
9
$("form").bind(
 
  "submit",
 
  function(event){
    event.preventDefault();
  }
 
);

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

1
2
3
4
5
6
7
8
9
$("form").bind(
 
  "submit",
 
  function(event){
    event.stopPropagation();
  }
 
);

(4)总结

1. 一个事件起泡对应触发的是上层的同一事件

特殊:如果two设置成双击事件,那么在你单击two的时候就会起泡触发one单击的事件

(双击包含单击)。

2. 如果在click事件中,在你要处理的事件之前加上e.preventDefault();

那么就取消了行为(通俗理解:相当于做了个return操作),不执行之后的语句了。

3. e.stopPropagation()只要在click事件中,就不会触发上层click事件。

1
2
3
4
5
6
7
8
9
10
11
//如果提供了事件对象,则这是一个非IE浏览器
 
if ( e && e.stopPropagation )
  // 因此它支持W3C的stopPropagation()方法
  
e.stopPropagation();
else
  //否则,我们需要使用IE的方式来取消事件冒泡
  
window.event.cancelBubble = true;
return false;

jquery取消事件冒泡的三种方法(推荐)的更多相关文章

  1. jquery取消事件冒泡的三种方法展示

    jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...

  2. Html 中阻止事件冒泡的三种方法比较

    A:return false --->In event handler ,prevents default behavior and event bubbing .         return ...

  3. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  4. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  5. Android监听点击事件实现的三种方法

    监听点击事件实现的三种方法:1.匿名内部类2.外部类3.直接实现接口 1.匿名内部类: package com.jereh.calculator; import android.content.Con ...

  6. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  7. jQuery 取消事件冒泡 阻止后续内容执行 闭包函数 (学习笔记)

    1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style& ...

  8. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...

  9. jquery取消事件冒泡和取消默认行为

    $('button').click(functon(e){ /*code*/ e.stopPropagation();//取消事件冒泡 e.preventDefault();//取消默认行为 })

随机推荐

  1. Java多线程系列--“JUC集合”06之 ConcurrentSkipListSet

    概要 本章对Java.util.concurrent包中的ConcurrentSkipListSet类进行详细的介绍.内容包括:ConcurrentSkipListSet介绍ConcurrentSki ...

  2. [UWP]涨姿势UWP源码——Unit Test

    之前我们讨论了涨姿势UWP的RSS数据源获取,以及作为文件存储到本地,再将数据转化成Model对象.这部分非UI的内容非常适合添加Unit Test.不涉及UI的话,UT写起来简单高效,很是值得投入一 ...

  3. 轻松自动化---selenium-webdriver(python) (四)

    本节要解决的问题: 如何定位一组元素? 场景 从上一节的例子中可以看出,webdriver可以很方便的使用findElement方法来定位某个特定的对象,不过有时候我们却需要定位一组对象, 这时候就需 ...

  4. 可视化工具solo show-----Prefuse自带例子GraphView讲解

    2014.10.15日以来的一个月,挤破了头.跑断了腿.伤透了心.吃够了全国最大餐饮连锁店——沙县小吃.其中酸甜苦辣,绝不是三言两语能够说得清道的明的.校招的兄弟姐妹们,你们懂得…… 体会最深的一句话 ...

  5. [UWP]涨姿势UWP源码——IsolatedStorage

    前一篇涨姿势UWP源码分析从数据源着手,解释了RSS feed的获取和解析,本篇则会就数据源的保存和读取进行举例. 和之前的Windows Runtime一样,UWP采用IsolatedStorage ...

  6. C#序列化s实体类成Xml,去除空格、换行符以及命名空间

    序列化实体类成为一个干净的Xml,不带空格.换行符以及命名空间 /// <summary> /// 序列化成XML /// </summary> /// <typepar ...

  7. [Asp.net 5] Configuration-新一代的配置文件(神奇的Binder)

    关于配置文件的目录:[Asp.net 5] Configuration-新一代的配置文件 之前看过MVC4.0的源码,里面就有Binder.作用是将前台页面传递过来的键值对/字典表绑定到特定的对象.此 ...

  8. javascript事件分类解析

    最近在学习javascript,就顺便把常用事件给大家整理整理,也让自己加深印象.不足之处欢迎各位补充. 一般事件 onclick 鼠标点击时触发此事件 ondblclick  鼠标双击时触发此事件 ...

  9. 利用chardet检测网页编码

    环境:Win7_x64 + python3.4.3 需要先下载chardet并进行安装,下载地址:https://pypi.python.org/packages/source/c/chardet/c ...

  10. MVP 2015社区大讲堂之:在ASP.NET应用中执行后台任务

    昨天下午,在微软的MVP 2015社区大讲堂上给大家分享了一个题目:在ASP.NET应用中执行后台任务.这是一点都不高大上,并且还有点土气的技术分享.不过我相信很多人都遇到过这样的问题. 虽然是一个很 ...