JavaScript 阻止默认时间和冒泡时间
<!DOCTYPE HTML>
<html>
<head>
<title>event cancel</title>
</head>
<body>
<a href="https://www.baidu.com/">baidu</a>
<div style="width: 400px; height: 300px; background: red;" id="d1">
<div style="width: 250px; height: 250px; background: yellow;" id="d2">
<button id="btn1">click me</button>
</div>
</div>
</body>
</html>
<script type="text/javascript" >
document.getElementsByTagName("a")[0].onclick = function(e){
cancelHandler(e); //取消a标签打开连接的事件， 然后执行click事件
alert("cancel the default event!");
}
function cancelHandler (event) {
var event = event || window.event; // for ie
//取消事件相关的默认行为
if(event.preventDefault) event.preventDefault(); //标准技术
if(event.returnValue) event.returnValue = false;
return false; //用于处理对象属性注册的处理程序。
}
//测试冒泡时间
document.getElementById("d1").onclick = function () {
alert("d1 clicked");
}
document.getElementById("d2").onclick = function () {
alert("d2 clicked"); //点击d2会触发两次点击时间, 一次是d2自己的, 第二次是父亲d1的
}
document.getElementById("btn1").onclick = function (e) {
e.stopPropagation(); //阻止向上冒泡
alert("button clicked");
}
</script>
JavaScript 阻止默认时间和冒泡时间的更多相关文章
- javascript -- 阻止默认事件 阻止事件冒泡
1. event.preventDefault(); -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- JavaScript事件：事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件
(一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- Javascript和jquery事件--阻止事件冒泡和阻止默认事件
阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...
- javascript的阻止默认事件和阻止冒泡事件
这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为 在说事件冒泡之前 ...
- jQuery阻止默认行为和阻止冒泡
1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); < ...
- js阻止默认事件，如a标签跳转和事件冒泡
禁止a标签点击跳转 <a href="http://baidu.com" onclick="return false">点我啊</a> ...
- 18.阻止默认操作e.preventDefault();防止冒泡事件：e.stopPropagation()
一.加了e.preventDefault();会阻止a标签默认的点击跳转效果 <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- IE8 placeholder兼容+Password兼容
对于placeholder兼容问题 IE系列的大部分不兼容 使用JQ插件解决这个问题,确实用法很简单 jS下载地址http://www.ijquery.cn/js/jquery.placeholder ...
- 关于电脑开机不出现桌面即不启动explorer.exe桌面程序--------正解
针对这个问题,一开始的思路是,把自己写的界面小程序(Win.exe)放在Windows启动文件夹中, 效果到是界面程序自启动了,但是还是先出现的桌面,然后才的启动的界面程序(Win.exe),并不是我 ...
- PHP magic_quotes_gpc的详细使用方法
工作中遇到的代码 if (ini_get('magic_quotes_gpc')) { function stripslashesRecursive(array $array){ foreach ($ ...
- cas sso原理（转）
采用CAS原理构建单点登录 企业的信息化过程是一个循序渐进的过程,在企业各个业务网站逐步建设的过程中,根据各种业务信息水平的需要构建了相应的应用系统,由于这些应用系统一般是 在不同的时期开发完成的,各 ...
- ubuntu用户及用户组文件信息
1.用户帐号文件 /etc/passwd中存放当前系统的用户列表及用户基本的设置信息: 文件中每一行对应一个用户信息,用户信息用":"来分隔,各项内容含义如下: 用户名:用户密码: ...
- 解决Mac上Android开发时adb连接不到手机问题
今天在Mac OS上进行Android开发的时候,打开eclipse连接不到手机MX4问题 1. 插入手机打开 Terminal,输入 system_profiler SPUSBDataType 2 ...
- Android源码下载方法详解
转自:http://www.cnblogs.com/anakin/archive/2011/12/20/2295276.html Android源码下载方法详解 相信很多下载过内核的人都对这个很熟悉 ...
- 更快的使用你的键盘：AUTOHOTKEY
本文适合于:每天用电脑工作学习的朋友.游戏发烧手指又不灵敏的朋友.希望提高自己使用电脑效率的朋友. 本文将将告诉你AutoHotkey能做什么,并会一步一步地教会你轻易地使用它,但不会教你更多Auto ...
- JQUERY1.9学习笔记 之基本过滤器(九) 小于选择器
小于选择器 jQuery( ":lt(index)" ) jQuery( ":lt(-index)" ) 描述:选择所有小于指定下标的元素. <!DOCT ...
- 删除左右两边的空格trim
js中却没有trim()/ltrim()和rtrim()内置方法,所以需要自己写 写成类的方法格式如下:(str.trim();) <script language="javascri ...