一个取消事件的简单js例子(事件冒泡与取消默认行为)
先上代码:
<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例子(事件冒泡与取消默认行为)的更多相关文章
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- JavaScript使用自定义事件实现简单的模块化开发
WEB前端最常见驱动方式就是事件了, 所有交互等等都是通过事件,前端的常见事件有: UI事件: 焦点事件: 鼠标事件: 滚轮事件: 文本事件: 键盘事件: 变动事件: 现在网页上有一个输入框, 如果我 ...
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...
- js粘贴事件paste简单解析及遇到的坑
在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题. 目前只有Chrome支持获取剪切板中的图片数据.还好需要这个功能的产品目前只支持Chrome和Safari,一些Chrome ...
- C#利用事件与委托进行窗体间传值简单小例子
本篇博客是利用C#委托与事件进行窗体间传值的简单小例子 委托与事件的详细解释大家可以参照张子阳的博客: http://www.tracefact.net/CSharp-Programming/Dele ...
- 从零开始学习Node.js例子六 EventEmitter发送和接收事件
pulser.js /* EventEmitter发送和接收事件 HTTPServer和HTTPClient类,它们都继承自EventEmitter EventEmitter被定义在Node的事件(e ...
- JS 传播事件、取消事件默认行为、阻止事件传播
1.事件处理程序的返回值 通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的o ...
- 移动端-js触摸事件
开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...
- js关于事件
摘要:事件在Web前端领域有很重要的地位,很多重要的知识点都与事件有关.本文旨在对常用的事件相关知识做一个汇总和记录. 在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一 ...
随机推荐
- FineUI 3升级4.1.1时,SingleClickExpand属性改什么了? (树控件单击展开)
private Tree InitTreeMenu(List<Menu> menus) { Tree treeMenu = new Tree(); treeMenu.ID = " ...
- FastDFS 环境搭建
原文地址:FastDFS 环境搭建 博客地址:http://www.extlight.com 一.前言 最近闲下来,整理了一下笔记,今天就分享一下 FastDFS 环境搭建吧. 二.介绍 2.1 Fa ...
- jni头文件自动生成
写一个测试代码,大概如下 package aa.bb; public class TestClass { public native void aaaBBB(); } 在项目的src目录下执行 jav ...
- Gradle Build速度加快终极方法(android studio)
Android Studio用起来越来越顺手,但是却发现Build的速度实在不敢恭维,在google和度娘了几把(....)之后,大体就是分配更高的内存,步骤:Setting-->搜索gradl ...
- socket编程时SIGPIPE信号的处理
如果在write调用期间对方关闭连接,视时间顺序的不同有以下几种情况: 1. 刚好在write调用之前对方关闭: write返回失败,同时产生SIGPIPE. 2. write调用过程中对方关闭: 返 ...
- windows下使用RedisCluster集群简单实例
一.开发环境 ruby环境准备 下载 64位的 RubyInstaller并安装 地址http://rubyinstaller.org/downloads/勾选下面三个不用配置环境变量 Image.p ...
- 关于文章cisco漏洞4786
查看确认方法 [root@nodchen ~]# nmap -p4786 172.30.4.2 Starting Nmap 5.51 ( http://nmap.org ) at 2017-05-20 ...
- 1116 Come on! Let's C (20 分)
1116 Come on! Let's C (20 分) "Let's C" is a popular and fun programming contest hosted by ...
- IntelliJ IDEA 创建Web项目
1:创建Project:依次点击File–new Project: 2:选择Empty Project项目,点击Next: 3:输入项目名称,选择项目路径: 4:创建Module:点击Finish,弹 ...
- 详解UE4静态库与动态库的导入与使用
转自:http://blog.csdn.net/u012999985/article/details/71554628 一.基本内容概述 最近做项目时经常看到build.cs文件,就想研究一下UE ...