先上代码:

<div id='outer' onclick='alert("我是outer")'>
<div id="middle" onclick='alert("我是middle")'>
<div id="inner" onclick='myBubble(arguments[0]);alert("我是inner")'><a onclick='myDefault()' id='dd' href="http://www.baidu.com">js事件</a></div>
</div>
</div>
<script>
function myBubble(e){
var e=e||window.event;
e.stopPropagation?e.stopPropagation():(e.cancelBubble=true);
}
function myDefault(e){
var e=e||window.event;//IE
if(e.preventDefault)//标准
{
e.preventDefault();
}
else if('returnValue' in e )//IE,如果判断条件设成e.returnValue,在IE8及以下版本不识别,本例中点击后会跳转
{
e.returnValue=false;
}
return false; //处理使用对象属性注册的处理程序
}
</script>

上面的代码效果:仅弹出提示窗口“我是inner”。

如果去掉dd中的myDefault函数,则:我是inner>>跳转到百度首页。

如果将上面的两个函数都去掉:我是inner>>我是middle>>我是outer>>跳转到百度首页。

上面的例子主要涉及到事件冒泡和取消默认行为两个方面。

一个取消事件的简单js例子(事件冒泡与取消默认行为)的更多相关文章

  1. javascript 事件委托,jq,js模拟事件

    <!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...

  2. JavaScript使用自定义事件实现简单的模块化开发

    WEB前端最常见驱动方式就是事件了, 所有交互等等都是通过事件,前端的常见事件有: UI事件: 焦点事件: 鼠标事件: 滚轮事件: 文本事件: 键盘事件: 变动事件: 现在网页上有一个输入框, 如果我 ...

  3. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  4. js粘贴事件paste简单解析及遇到的坑

    在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题. 目前只有Chrome支持获取剪切板中的图片数据.还好需要这个功能的产品目前只支持Chrome和Safari,一些Chrome ...

  5. C#利用事件与委托进行窗体间传值简单小例子

    本篇博客是利用C#委托与事件进行窗体间传值的简单小例子 委托与事件的详细解释大家可以参照张子阳的博客: http://www.tracefact.net/CSharp-Programming/Dele ...

  6. 从零开始学习Node.js例子六 EventEmitter发送和接收事件

    pulser.js /* EventEmitter发送和接收事件 HTTPServer和HTTPClient类,它们都继承自EventEmitter EventEmitter被定义在Node的事件(e ...

  7. JS 传播事件、取消事件默认行为、阻止事件传播

    1.事件处理程序的返回值 通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的o ...

  8. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  9. js关于事件

    摘要:事件在Web前端领域有很重要的地位,很多重要的知识点都与事件有关.本文旨在对常用的事件相关知识做一个汇总和记录. 在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一 ...

随机推荐

  1. [转]Spring事务<tx:annotation-driven/>

    在使用SpringMVC的时候,配置文件中我们经常看到 annotation-driven 这样的注解,其含义就是支持注解,一般根据前缀 tx.mvc 等也能很直白的理解出来分别的作用.<tx: ...

  2. drbd脑裂问题处理

    http://blog.csdn.net/heianemo/article/details/8439813 split brain实际上是指在某种情况下,造成drbd的两个节点断开了连接,都以prim ...

  3. mysql常用语法操作

    一.用户管理: 1.新建用户: >CREATE USER name IDENTIFIED BY 'ssapdrow'; 2.更改密码: >SET PASSWORD FOR name=PAS ...

  4. Yii 用户登录验证

    http://blog.sina.com.cn/s/blog_685213e70101mo4i.html 1)首先在model文件夹中新建文件 LoginForm.php 代码如下 <?php ...

  5. javascript节点操作replaceChild()

    replaceChild(a,b)是用来替换文档中的已有元素的 参数a:要插入的节点, 参数b:要替换的节点 var oDiv = document.getElementById("guoD ...

  6. Ubuntu-14.04.1 desktop安装时遇到的小问题

    su root认证失败:sudo passwd root,然后设置新密码. 重装linux导致g++显示已安装,但无法使用:将"系统设置"/"软件源"中所有更新 ...

  7. PHP书写格式

    从一个例子开始. 启动编辑器,创建一个php文件并键入如下代码: <?php echo "你好!"; ?> 运行 将该文件命名为 test.php 并存储于 E:htm ...

  8. reduce|sum

    reduce() 函数会对参数序列中元素进行累积. 函数将一个数据集合(链表,元组等)中的所有数据进行下列操作:用传给 reduce 中的函数 function(有两个参数)先对集合中的第 1.2 个 ...

  9. 常用模块:os模块,logging模块等

    一    os模块 那么作为一个常用模块,os模块是与操作系统交互的一个模块. 那么os模块中我们常用的一般有以下几种: os.listdir('dirname') 以列表的形式列出指定目录下的所有文 ...

  10. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...