[JavaScript知识库]jQuery事件冒泡

? ? ?开始前，我就想问几个问题。

1. 什么是事件冒泡
2. 如何阻止事件冒泡

先看代码图、设置两个盒子，用一个盒子包着另一个盒子，外边的盒子我给它红色、里边的盒子我给它蓝色，用jQuery赋予两个盒子点击事件

当你点击外边的盒子时，提示框会弹出“fanther”如下图

当你点击里边的盒子时。提示框会依次弹出“son”和“fanther”。

如果子元素和父元素同时注册了点击事件或其他事件，在子元素响应事件的时候父元素也会跟着响应事件，这就是事件的冒泡，事件冒泡就是事件从里向外、从下级往上级传递的一个过程。

那要如何阻止呢！

1、我们只需要在子元素注册事件的时候，在结束代码的时候加上“return false；”这样就不会发生事件冒泡。

2、只要触发事件，在触发事件回调的时候，会传递一个“event”参数，拿到“event”对象，调用“event”对象中stopPropagation()方法也可以阻止事件冒泡。

总结：1、什么是事件冒泡？

如果父元素与子元素都注册了事件，子元素响应事件的时候，父元素也会跟着响应事件(事件从里到外、从下级往上级传递的过程)

? ? ? ? ? 2、如何阻止事件冒泡(两个解决方案)

? ? ? ? ? 2.1 ?return false

? ? ? ? ? 2.2 ?传递一个默认参数event ?event.stopPropagation()

? ? ? ? ? 注意点：上述两个方案都是写进下级元素里面