如何阻止事件冒泡和默认行为？

1.背景介绍

浏览器的事件发生顺序

浏览器的事件发生顺序分为事件冒泡与事件捕获

事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。

因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

事件捕获会从最外层开始发生，直到最具体的元素。

因此在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

2.先捕获再冒泡

3.常见问题

如何阻止事件冒泡和默认事件?

4.解决方案

阻止事件冒泡

DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行.

IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用.

阻止默认行为

DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行。

IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用。