<!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 阻止默认时间和冒泡时间的更多相关文章

  1. javascript -- 阻止默认事件 阻止事件冒泡

    1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: ...

  2. jquery 阻止冒泡事件和阻止默认事件

    jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. JavaScript事件：事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

    (一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...

  4. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  5. Javascript和jquery事件--阻止事件冒泡和阻止默认事件

    阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...

  6. javascript的阻止默认事件和阻止冒泡事件

    这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为   在说事件冒泡之前 ...

  7. jQuery阻止默认行为和阻止冒泡

    1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); < ...

  8. js阻止默认事件，如a标签跳转和事件冒泡

    禁止a标签点击跳转 <a href="http://baidu.com" onclick="return false">点我啊</a> ...

  9. 18.阻止默认操作e.preventDefault();防止冒泡事件：e.stopPropagation()

      一.加了e.preventDefault();会阻止a标签默认的点击跳转效果 <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. jquery获取元素到屏幕底的可视距离

    jquery获取元素到屏幕底的可视距离 要打对号的图里的height(我自称为可视高度:滚动条未滑到最底端)  不是打叉图里的到页面底部(滚动条到最底部时的height)(offset().top方法 ...

  2. Datables wrning(table id='example'):Cannot reinitialise DataTable.

    出现的问题如下所示: Datables wrning(table id='example' Datables object for this table,please pass eithser no ...

  3. IMP数据文件时ORA-00959错误分析

    有时间模拟一下ORA-00959的测试分析.

  4. Swift - 09 - Optionals

    //: Playground - noun: a place where people can play import UIKit // swift中没有被赋值的变量是不能被使用的 //var str ...

  5. 你好，C++（9）坐216路公交车去买3.5元一斤的西红柿——C++中如何表达各种数值数据 3.3 数值数据类型

    3.3  数值数据类型 从每天早上睁开眼睛的那一刻开始,我们几乎每时每刻都在与数字打交道:从闹钟上的6点30分,到上班坐的216路公共汽车:从新闻中说的房价跌到了100元每平米到回家买菜时的西红柿3. ...

  6. 【USACO 1.3.4】牛式

    [題目描述 ] 下面是一个乘法竖式,如果用我们给定的那n个数字来取代*,可以使式子成立的话,我们就叫这个式子牛式. * * * x * * ---------- * * * * * * ------- ...

  7. 78 Subsets(求子集Medium)

    题目意思:求解一个数组的所有子集,子集内的元素增序排列eg:[1,3,2] result:[],[1],[2],[1,2],[3],[1,3],[2,3],[1,2,3]思路:这是一个递推的过程 [] ...

  8. PhotoShop 移动工具详解

    自动选择工具 勾选后  可以随意移动任意图层     不勾选  只适用于移动当前所选图层 Ctrl+Z 还原移动Ctrl+Alt+Z 后退一步 复制图像 Alt键+拖动 Shift+Alt+拖动   ...

  9. 【问题】tableView的每组的头部不不能滚动的解决方案

    group模式的解决方案 - (void)scrollViewDidScroll:(UIScrollView*)scrollView { if (scrollView == self.tableVie ...

  10. zoj 3758 Singles' Day

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5203 题意:有n个1然后按照b进制转化为10进制数,判断这个数是不是素数. # ...