2. 取消冒泡事件
这里试着取消box的冒泡事件。 当我们点击box区域时，应该仅仅返回“2. box 冒泡”的打印结果。
box.addEventListener('click',function(e) { console.log('2. box 冒泡'); e = e || window.event; var target = e.target || e.srcElement; // 后一种为兼容IE的写法 console.log(target); // 冒泡事件取消 if(e.stopPropagation) { // W3C标准 e.stopPropagation(); }else { e.cancelBubble = true; // IE & Chrome支持 } }, false);
2.1 点击box区域
结果显示，取消box的冒泡事件成功。
七、默认事件
我们知道在点击某些控件或者元素时，会出现刷新页面的效果，这些事件就是默认事件。 典型的默认事件有：
- 表单提交
- a标签的跳转
- 点击右键弹出菜单
八、取消默认事件
在我们开发的过程中，我们往往不需要这些触发的默认事件。那么如何取消呢？
1. 方式
onType: return false;W3C: event.preventDefault();IE: event.returnValue = false;
2. 案例
这里以取消右键菜单的默认事件为例。
1. 第一种方式
document.oncontextmenu = function() { console.log('right click'); return false; }
2. 第二种方式
document.addEventListener('contextmenu', function(e) { console.log('addEventListener contextmenu'); e = e || window.event; if(e.preventDefault) { e.preventDefault(); }else { e.returnValue = false; } }, false);
九、本节思维导图
