- Event.preventDefault() 取消浏览器对当前事件的默认行为。
- Event.stopPropagation() 阻止事件冒泡。
- Event.stopImmediatePropagation() 阻止同一个事件的其他监听函数被调用,不管监听函数定义在当前节点还是其他节点。也能阻止事件的冒泡。
Event.preventDefault
Event.stopPropagation
<div id="parent" style="width: 100px;height: 100px;background: lawngreen;overflow: hidden;">
<div id="son" style="width: 50px;height: 50px;background-color: lightcoral;margin: 25px;">点击我</div>
</div>
<script>
var parent = document.getElementById('parent');
var son = document.getElementById('son');
parent.addEventListener('click', function(){
console.log('parent');
}, false);
son.addEventListener('click', function(event){
event.stopPropagation();
console.log('son');
}, false);
</script>
Event.stopImmediatePropagation
<div id="parent" style="width: 100px;height: 100px;background: lawngreen;overflow: hidden;">
<div id="son" style="width: 50px;height: 50px;background-color: lightcoral;margin: 25px;">点击我</div>
</div>
<script>
var parent = document.getElementById('parent');
var son = document.getElementById('son');
parent.addEventListener('click', function(){
console.log('parent');
}, false);
son.addEventListener('click', function(event){
event.stopImmediatePropagation();
console.log('son1');
}, false);
son.addEventListener('click', function(event){
console.log('son2');
}, false);
</script>