阻止事件冒泡以及兼容性写法
阻止冒泡 :
1、dom 推荐 stopPropagation()阻止捕获和冒泡阶段中当前事件的进一步传播。但是,它不能防止任何默认行为的发生; 例如,对链接的点击仍会被处理。 不适用于 ie 6 7 8 .
2、cancelBubble:Event.cancelBubble 属性是 Event.stopPropagation()的一个曾用名。在从事件处理程序返回之前将其值设置为true可阻止事件的传播。 适用于 ie 6 7 8
<body>
<div class="father">
<div class="son">son</div>
</div>
<script>
// 常见事件对象的属性和方法
// 阻止冒泡 dom 推荐和标准 stopPropagation()
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
// 兼容性写法
if (e && e.stopPropagation) {
e.stopPropagation(); //ie678 不适用
} else {
window.event.cancelBubble = true; // 适用于 ie 678
}
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
</body>
利用 if else 判断处理兼容性问题