一个取消事件的简单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前端领域有很重要的地位,很多重要的知识点都与事件有关.本文旨在对常用的事件相关知识做一个汇总和记录. 在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一 ...
随机推荐
- Javascript 在严格模式下不允许删除变量或对象
如下代码,运行后在浏览器中会报错. <script> "use strict"; var x = 3.14; delete x; </script>
- sklearn, Numpy以及Pandas
pandas里面的对于数据操作比如where,drop以及dropna等都会有一个属性:inplace,这个单词意思是原地,如果inplace=true代表数据本身要执行该操作:如果inplace=f ...
- VS2015 C#项目工程配置emgucv依赖的方法
1.VS2015新建一个C# console工程 2.Tools->NuGet package management->manage NuGet package for solution- ...
- 实际用户ID和有效用户ID (一) *****
在Unix进程中涉及多个用户ID和用户组ID,包括如下: 1.实际用户ID和实际用户组ID:标识我是谁.也就是登录用户的uid和gid,比如我的Linux以simon登录,在Linux运行的所有的命令 ...
- bzoj4236 JOIJOI
Description JOIOJI桑是JOI君的叔叔.“JOIOJI”这个名字是由“J.O.I”三个字母各两个构成的. 最近,JOIOJI桑有了一个孩子.JOIOJI桑想让自己孩子的名字和自己一样由 ...
- jackson快速实现对象与json之间的转换
Maven依赖: <dependency> <groupId>com.fasterxml.jackson.dataformat</groupId> <arti ...
- js中,object可以调用style对象,[]不可以调用style对象
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content=&q ...
- [C#]泛型约束在窗体定义上的使用
查相关资料查的一团乱,自己瞎写了几次以后误打误撞成功了: namespace Test1 { public partial class Form1<T> : Form { // ... F ...
- TraceLog.cs 累积 C#
using System; using System.Collections.Generic; using System.Text; using System.IO; using System.Dia ...
- ie6、7下button添加背景和边框,内边距会出现1px的边框
ie6.7下button添加背景和边框,内边距会出现1px的空白边框 解决办法:在input外面加上一个标签,把背景和边框都写在标签的样式上面,input的 background和border都non ...