码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 阻止默认时间和冒泡时间

时间:2016-05-11 01:05:03      阅读:386      评论:0      收藏:0      [点我收藏+]

标签:

<!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 阻止默认时间和冒泡时间

标签:

原文地址:http://www.cnblogs.com/facial/p/5479873.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!