1、事件流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0 ;
margin: 0;
}
#beijing{
width: 800px;
height: 500px;
background: mediumorchid;
}
#chaoyang{
width: 500px;
height: 400px;
background: orange;
}
#shunbailu{
width: 350px;
height: 300px;
background: palegreen;
}
</style>
<script type="text/javascript">
// 冒泡型事件流是由最明确的事件源到不明确的事件源依次触发.离鼠标越近,就表示越明确
window.onload = function(){
document.getElementById('beijing').onclick = function(){
alert('北京');
}
document.getElementById('chaoyang').onclick = function(e){
alert('朝阳');
// 在这里阻止事件流代码,后面的一次就不弹出来了
var dd = window.event || e; //获得对象
// 判断浏览器,因为IE和W3C的支持代码不同
if (document.all) {
// IE方法 阻止事件流 在这个的后续就不显了
dd.cancelBubble = true;
// W3C方法 阻止事件流
}else{
dd.stopPropagation();
}
}
document.getElementById('shunbailu').onclick = function(){
alert('顺白路');
}
}
</script>
</head>
<body>
<div id="beijing">北京
<div id="chaoyang">朝阳
<div id="shunbailu">顺白路</div>
</div>
</div>
</body>
</html>
2、阻止元素默认事件
方法（1）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var dd = document.getElementById('dd');
dd.onclick = function(e){
alert('点击了优酷');
// 获得事件对象
var tt = window.event || e;
// 浏览器判断 阻止浏览器默认的(后续)事件
if (document.all) {
tt.returnValue = false; //IE
} else{
tt.preventDefault(); //W3C
}
}
}
</script>
</head>
<body>
<a href="http://baidu.com" id="dd">优酷</a>
<!--阻止浏览器事件一般用在 a标签，和submit这个提交按钮里-->
<!--<form action="">
<input type="submit" name="" id="" value="" />
</form>-->
</body>
</html>
方法（2）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var dd = document.getElementById('dd');
dd.onclick = function(){
alert('点击了优酷');
}
}
</script>
</head>
<body>
<!--如果写一个javascript就会执行js代码了，就不会点击跳转了-->
<!--void(0)这个是一个固定写法-->
<a href="javascript:void(0)" id="dd">优酷</a>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7718.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知