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中的parseInt的进制问题
- AngularJs $q 承诺与延迟
- DrawerLayout学习,抽屉效果
- 使用jmx监控tomcat
- Cocoa Drawing
- 三种找回 linux root密码
- POJ 2236 (简单并查集) Wireless Network
- Devexpress DateEdit选年月 z
- 网易新闻RSS阅读器
- HttpClient使用笔记
- smarty 比较运算符对照表
- Unity FisheyeShader using Spherical Mapping
- 绘图quartz之加水印
- AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 《转》
- android 画图之setXfermode .
- swig编译GDAL的C#库时遇到的代码安全问题及解决方法
- Linux.杀毒.Centos安装杀毒软件Clam
- Pandas plot出图
- (转)面向对象(深入)|python描述器详解
- sql2005 新加的函数 row_number ()
热门文章
- JavaScript ArrayBuffer浅析
- Hibernate HQL查询:
- Android开发手记(15) 拨打电话和收发短信
- 顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析
- Android Studio删除Project
- PAT - IO - 螺旋方阵
- html页面button样式
- 解决spring mvc 上传报错,Field [] isn&#39;t an enum value,Failed to convert value of type &#39;java.lang.String[]&#39; to required type &#39;
- LIKE匹配关键字
- JS键盘的键码(event.keyCode)