1、阻止表单的默认事件,或者在html5中文档滑动的默认事件 【event.preventDefault();】 -- 阻止元素的默认事件。
demo1-1:阻止元素类默认事件
<a href="http://www.baidu.com" target="_black">百度</a>
document.getElementByTagName("a").addEventListener("click",function(e){e.preventDefault()},false);
点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到百度了。
demo1-2:移动端中阻止document默认事件
document.ontouchmove = function(ev){
ev.preventDefault();
};
=========
2、-- 阻止元素冒泡事件【(ie:)ev.cancelBubble = true; (ff:) ev.stopPropagation(); 】;
demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#beijing{
width: 600px;
height: 400px;
background: purple;
margin: 0 auto;
}
#chaoyang {
width: 500px;
height: 300px;
background: orange;
}
#niaochao{
width: 400px;
height: 200px;
background: green;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementById('beijing').onclick = function(){
alert('我是北京')
}
document.getElementById('chaoyang').onclick = function(e){
alert('我是朝阳区')
var ev = window.event || e;
if(document.all){//阻止事件流
ev.cancelBubble = true;
}else{
ev.stopPropagation();
}
}
document.getElementById('niaochao').onclick = function(){
alert('我是鸟巢')
}
}
</script>
</head>
<body>
<div id="beijing">
<div id="chaoyang">
<div id="niaochao"></div>
</div>
</div>
</body>
</html>