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

jQuery 代码:

$("form").bind(

  "submit",

  function() {

    return false;

   }

);

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

jQuery 代码:

$("form").bind(

  "submit",

  function(event){
    event.preventDefault();
  }

);

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

jQuery 代码:

$("form").bind(

  "submit",

  function(event){
    event.stopPropagation();
  }

);

(4)总结

1.一个事件起泡对应触发的是上层的同一事件
  特殊:如果two设置成双击事件,那么在你单击two的时候就会起泡触发one单击的事件
  (双击包含单击)。

2.如果在click事件中,在你要处理的事件之前加上e.preventDefault();
 那么就取消了行为(通俗理解:相当于做了个return操作),不执行之后的语句了。

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

//如果提供了事件对象,则这是一个非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. jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...

  3. JS:event对象下的target属性和取消冒泡事件

    1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...

  4. jQuery event,冒泡,默认事件用法

    jQuery event,冒泡,默认事件用法 <%@ page language="java" import="java.util.*" pageEnco ...

  5. 移动端和pc端事件绑定方式以及取消浏览器默认样式和取消冒泡

    ### 两种绑定方式 (DOM0)1.obj.onclick = fn; (DOM2)2. ie:obj.attachEvent(事件名称,事件函数); 1.没有捕获(非标准的ie 标准的ie底下有 ...

  6. javascript 事件冒泡与取消冒泡

    事件冒泡: 当一个元素上的事件被触发时,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先中被触发,这一过程被称为事件冒泡. 这个事件从原始祖先开始,一直冒泡到DOM树的最上层.(bug) ...

  7. 阻止jQuery事件冒泡

    Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头 ...

  8. jquery取消绑定的方法

    jquery取消绑定的方法 一般用变量控制 不要用unbind() 相应比较慢 <pre> $('.choseitem').on('click', function () { //如果设置 ...

  9. javascript的自定义对象/取消事件/事件兼容性/取消冒泡

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

    (一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...

随机推荐

  1. 查看某一职责下对应的菜单&功能&请求

    查看菜单&功能 SELECT res.RESPONSIBILITY_NAME 职责名称, menu.MENU_NAME 菜单编码, menu.USER_MENU_NAME 菜单名称, func ...

  2. Servlet处理流程分析-Servlet学习之旅(二)

    tomcat的处理处理客户端流程分析 tomcat即是servlet容器也具有web服务器的功能,即也具有html页面的功能. 1.首先客户端会将html请求发给tomcat内置的web服务器 2.w ...

  3. Android 9Patch图片的使用-android学习之旅(十八)

    9patch的使用方法 9patch图片常被用来做消息发送等的图片,只是缩放照片的部分区域,使得图片的整体形状不会受到影响,比较方便. 下面我们介绍一下: 在android的SDK安装目录下的tool ...

  4. Android多点触摸缩放图片-android学习之旅(四)

    获取多触摸点 核心代码: 获取触摸点的个数和位置 public boolean onTouch(View v, MotionEvent event) { switch (event.getAction ...

  5. [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...

  6. JUI/DWZ介绍、简单使用

    简介 由于开发的项目使用JUI,所以学习了. DWZ富客户端框架(jQuery RIAframework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.(现在更名为JUI) 可 ...

  7. sublime test2 快捷键

    快捷键比较全的:http://blog.useasp.net/archive/2013/06/14/sublime-text-2-all-default-Shortcuts-table-on-wind ...

  8. XML Publisher Report Issues, Recommendations and Errors

    In this Document   Purpose   Questions and Answers   References APPLIES TO: Oracle Process Manufactu ...

  9. javascript语法之字符串转换成数字

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 【翻译】Ext JS 5.0.1 中的新功能

    原文:What's New in Ext JS 5.0.1 今天,我们很高兴的宣布Ext JS 5.0.1发布了!此维护版本基于Sencha社区的反馈做了一些改进.下面让我们来了解一下这些改变. 可访 ...