<!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. Electron

    跨平台桌面app开发 Appjs hex nwjs electron 官网:http://electron.atom.io/ 中文文档:https://github.com/atom/electron ...

  2. 设置cookie倒计时让让表单自动提交

    <%@ page language="java" import="java.util.*" pageEncoding="gbk"%&g ...

  3. C# DateTime.Now

    //2008年4月24日 System.DateTime.Now.ToString("D"); //2008-4-24 System.DateTime.Now.ToString(& ...

  4. CoreLocation+MapKit系统定位(含坐标以及详细地址)

    iOS8 之后出现一些新的配置 [self.manager requestWhenInUseAuthorization]; 并且在info.plist文件中增加 NSLocationWhenInUse ...

  5. Swift - 21 - 字典实战和UIKit初探

    //: Playground - noun: a place where people can play import UIKit // 数据源 let colors = [ "Air Fo ...

  6. 知识点总结之HTML篇

    1.标签语义化: ①.在不依赖样式的情况下,页面能够呈现清晰的结构. ②.如果使用者有视觉障碍,屏幕阅读器会完全根据你的标记来选择读取你的网页. ③.有利于搜索引擎依赖于标记来确定上下文和各个关键字的 ...

  7. MySQL索引及Explain及常见优化

    MySQL索引设计的原则 1. 搜索的索引列,不一定是所要选择的列.换句话说,最适合索引的列是出现在WHERE 子句中的列,或连接子句中指定的列,而不是出现在SELECT 关键字后的选择列表中的列. ...

  8. php的session实现

    对于两次http请求,如果第一次http请求的重要数据要被第二次请求获取,办法是将第一次http请求数据保存下来,保存的办法很多,大体上有使用数据库,缓存,文件等等,那么php中的session实现实 ...

  9. Java基础学习第一天

    ================每日必读==================== 写代码: 1.明确需求.我需要实现什么需求? 2.分析思路.我需要怎么实现需求? 3.确定步骤.我的每一部分思路需要使 ...

  10. 转：CodeCube提供可共享、可运行的代码示例

    CodeCube是一个新服务和开源项目,旨在让开发者能够通过浏览器以一种安全的方式分享并运行代码示例从而提升协作. 最初发布的服务可以从codecube.io上获取,支持Ruby.Python.Go及 ...