1. 事件目标

现在,事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素)。而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:

// 修改前
$('#switcher').click(function(event){
$('#switcher .button').toggleClass('hidden');
})

// 修改后
$('#switcher').click(function(event){
if(event.target==this){
$('#switcher .button').toggleClass('hidden');
}
})

此时的代码确保了被单击的元素是<div id="switcher"> ,而不是其他后代元素。

2. 停止事件传播

事件对象还提供了一个.stopPropagation()方法,该方法可以完全阻止事件冒泡。与.target类似,这个方法也是一种纯JavaScript特性,但在跨浏览器的环境中则无法安全地使用 。不过,只要我们通过jQuery来注册所有的事件处理程序,就可以放心地使用这个方法。

下面,我们会删除刚才添加的检查语句event.target == this,并在按钮的单击处理程序中添加一些代码:

$('#switcher .button').click(funtion(event){
// ...
event.stopPropagation();
})

同以前一样,需要为用作单击处理程序的函数添加一个参数,以便访问事件对象。然后,通过简单地调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。

3. 默认操作

如果我们把单击事件处理程序注册到一个锚元素,而不是一个外层的<div>上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。这种行为与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默认操作。类似地,当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。

如果我们不希望执行这种默认操作,那么在事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是在正常的事件传播流中发生的。在这种情况下,.preventDefault()方法则可以在触发默认操作之前终止事件 。

提示 当在事件的环境中完成了某些验证之后,通常会用到.preventDefault()。例如,在表单提交期间,我们会对用户是否填写了必填字段进行检查,如果用户没有填写相应字段,那么就需要阻止默认操作。

如果想要同时停止事件传播和默认操作,可以在事件处理程序中返回false,这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。

js阻止冒泡事件及默认操作的更多相关文章

  1. js阻止冒泡事件和默认事件的方法

    阻止默认事件 function stopDeFault(e){ if(e&&e.preventDefault){//非IE e.preventDefault(); }else{//IE ...

  2. js 阻止冒泡事件和默认事件

    阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation() function stopBubble(eve ...

  3. JS阻止冒泡事件以及默认事件发生的简单方法

    如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父 ...

  4. jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...

  5. JS阻止冒泡和取消默认事件(默认行为)

    本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...

  6. JS阻止冒泡事件

    <!DOCTYPE html><html><head> <title></title> <style type="text/ ...

  7. jquery阻止冒泡事件行为发生

    <div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...

  8. js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数

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

  9. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

随机推荐

  1. solrj:org.apache.solr.common.util.NamedList.java

    package org.apache.solr.common.util; import java.io.Serializable; import java.util.ArrayList; import ...

  2. centos下添加环境变量和启动apache

    #修改环境变量文件 vi /etc/profile #文件内容末尾添上 PATH=/usr/local/php/bin:$PATH export PATH #修改后让环境变量生效 source /et ...

  3. uva 10054 The Necklace 拼项链 欧拉回路基础应用

    昨天做了道水题,今天这题是比较水的应用. 给出n个项链的珠子,珠子的两端有两种颜色,项链上相邻的珠子要颜色匹配,判断能不能拼凑成一天项链. 是挺水的,但是一开始我把整个项链看成一个点,然后用dfs去找 ...

  4. C++ 中的virtual关键词

    C++ 中的virtual关键词 动态绑定 所谓动态绑定,我的理解就是一个函数在调用之前无法得知参数的具体类型(基类还是派生类).C++ Primer上描述了两种动态绑定的情况: 要触发动态绑定,必须 ...

  5. Frameset使用教程 小结

    frame,是网页开发必须掌握的知识.例如后台架构.局部刷新,页面分割,都是frame的用途表现,尤其是后台页面制作,使用frame会给用户带来非常舒适的使用感受. frame知识点包括(frames ...

  6. Problem:Minesweeper Master

    Google code jam Qualification Round 2014 题目链接:https://code.google.com/codejam/contest/dashboard?c=29 ...

  7. Storm累计求和中使用各种分组Grouping

    Shuffle Grouping: 随机分组, 随机派发stream里面的tuple, 保证bolt中的每个任务接收到的tuple数目相同.(它能实现较好的负载均衡) Fields Grouping: ...

  8. java初级开发中的报错问题

      1.典例1 错误原因:?useUnicode=true&characterEncoding=UTxF8 纠错:其中的? 是汉语的 2.典例2 纠错原因:数据库没有打开 纠错: 我的电脑-- ...

  9. php学习笔记7--php中的数组

    php中的数组 1.数组的定义:显式方式:$arr = array(1,2,3,4,5); $arr1 = array('name'=>'dqrcsc','age'=>'24');隐式方式 ...

  10. DOS 批处理 修改xml文件

    之前对批处理和dos只停留在cd ping ipconfig水平,我以为改个文件应该很简单吧,把文件读出来做个替换再写回去不就欧了,百度个例子改改,那还不是分分钟的事,哪知道事实比想的要复杂的多. 我 ...