<!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. eclipse如何运行maven项目

    不然启动tomcat会提示spring的类找不到

  2. windows 8.1 administrator相关设置

    一.windows 8.1 开启administrator用户 windows8.1中文版,由于默认不开启administrator用户,所以需要自己手动开启 启用administrator:在cmd ...

  3. XCode的一些调试技巧

    XCode 内置GDB,我们可以在命令行中使用 GDB 命令来调试我们的程序.下面将介绍一些常用的命令以及调试技巧. po 命令:为 print object 的缩写,显示对象的文本描述(显示从对象的 ...

  4. Mac下配置node.js 和react-native

    最近对JS挺感兴趣的,就琢磨着在mac上配置下环境学习学习,正巧看到了Facebook的react-native,顺便配置了一下. 安装Homebrew 终端输入: ruby -e "$(c ...

  5. javascript基础学习（十一）

    javascript之BOM 学习要点: BOM介绍 Window对象 一.BOM介绍 浏览器对象模型简称为BOM(Brower Object Model),BOM由很多对象构成,对象与对象之间有着相 ...

  6. 保垒机SSH登录脚本

    线上服务器一般都会有一个保垒机,我们登录线上服务器的时候都要通过这个堡垒机来实现登录,这样我们就要维护很多线上服务器的ip,很麻烦. 所以写了一个脚本用来便捷的登录各个服务器,可以把这个脚本放到跳板机 ...

  7. wariging for you oh~

  8. Chrome扩展与用户隐私

    转载自https://www.imququ.com/post/chrome-extensions-and-user-privacy.html   Google Chrome浏览器应该早就是大家的默认了 ...

  9. TCP/IP-TCP

    Don't cry over spilt milk. "覆水难收" 参考资料:TCP/IP入门经典 (第五版)  TCP/IP详解 卷一:协议 TCP是协议栈中非常重要的一个部分, ...

  10. Android学习----五大布局

    1.LinearLayout 线性布局 android:orientation="horizontal" 制定线性布局的排列方式 水平 horizontal 垂直 vertical ...