js中冒泡和捕获是事件的两种行为
使用 stopPropagation() 起到阻止捕获和冒泡阶段中当前事件的进一步传播。
使用 preventDefault() 可以取消默认事件。浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转,form表单里点击提交按钮时网页会产生提交行为并刷新网页等等。
我们可以通过js取消或更改这些默认事件。
防止冒泡和捕获
w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true
stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是冒泡事件?如在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。
如:
<body>
<div class="box">
<div class="inner">1</div>
</div>
<a href="www.baidu.com" id="href">百度</a>
<script>
var box = document.querySelector(".box");
var inner = document.querySelector(".inner");
var href = document.querySelector("#href");
href.onclick = function(e){
e.preventDefault();//阻止默认行为
}
href.ondragstart = function(e){
e.preventDefault();//阻止默认行为
}
inner.onclick = function(event){
//目标元素
event.stopPropagation(); //阻止事件冒泡
alert("inner");
}
box.onclick = function(){
alert("box");
}
</script>
</body>
如上例子我们单击test时,会依次触发alert(“inner”),alert(“box”) 这就是事件冒泡。
阻止冒泡
window.event ? window.event.cancelBubble = true : e.stopPropagation();
取消默认事件
w3c的方法是 e.preventDefault(),IE则是使用e.returnValue = false;
preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接 <a>
,提交按钮 <input type=”submit”/>
等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。
我们都知道,链接 <a>
标签的默认动作就是跳转到指定页面,上面就以它为例,阻止它的跳转:
var href = document.querySelector("#href");
href.onclick = function(e){
e.preventDefault();//阻止默认行为
}