一个取消事件的简单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中类似PHP的uniqid()方法
JavaScript中类似PHP的uniqid()方法: function generateUIDNotMoreThan1million() { return ("0000" + ...
- 组件之间的通讯:vuex状态管理,state,getters,mutations,actons的简单使用(一)
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
- 异步Socket服务器与客户端
本文灵感来自Andre Azevedo 在CodeProject上面的一片文章,An Asynchronous Socket Server and Client,讲的是异步的Socket通信. S ...
- redis在PHP中的基本使用案例(觉得比较实用)
源地址 http://www.t086.com/article/4901
- vs2015 去除 git 源代码 绑定,改成向tfs添加源码管理
除了下文的方法是将源码管理从git改成tfs之外,还要做以下几步即可 向tfs添加源码 打开源码管理(管理连接),双击打开你要向其中添加的tfs连接 选中该解决方案,右键 将解决方案添加到源码管理 嵌 ...
- BASIC-1_蓝桥杯_闰年判断
正确代码: #include <stdio.h> int main(void){ int year = 0 ; scanf("%d",&year); if (y ...
- 【Tomcat-原】如何在Myeclipse中添加本地的Tomcat
2014-10-27 16-24-09 liulin 说明: Myeclipse中自带Tomcat,如果不想用Myeclipse自带的Tomcat,可以使用本地的Tomcat, 下面将介绍如何在My ...
- 敏感词文本文件 filtered_words.txt,里面的内容为以下内容,当用户输入敏感词语时,则打印出 Freedom,否则打印出 Human Rights
敏感词文件内容: 代码: def filtered_words(path='filtered_words.txt'): words = [] with open(path, 'r', encoding ...
- springMVC学习(12)-使用拦截器
一.拦截器配置和测试: 1)定义两个拦截器,(要实现HandlerInterceptor接口) HandlerInterceptor1: package com.cy.interceptor; imp ...
- python appium增加方法
1.测试过程中发现python client没有拨打电话的方法,因此去添加该方法 1.1查看源码 appium-base-driver/blob/master/lib/protocol/routes. ...