jquery-事件冒泡

jquery-事件冒泡

用例子来说明

jquery-事件冒泡
页面的布局

jquery-事件冒泡

样子

jquery-事件冒泡

绑定事件

jquery-事件冒泡

如果点击了son
会触发本身,父级,爷级的click事件

jquery-事件冒泡

jquery-事件冒泡
jquery-事件冒泡

即便把位置移开,点击son标签

外层也会得到对应的事件

说明,冒泡效果,不是以看到的效果为准的

是以标签布局的效果来的

试一试,利用定位让他们位置错开

点击偏移了的盒子,体验效果

阻止事件的冒泡

事件包裹的匿名函数中如果有形参。这个形参就是事件对象。

利用事件对象的一个方法来阻止。

jquery-事件冒泡

阻止的位置添加被点击的层级

如果是子级点击,不希望事件被传递到上一级

就在子级进行阻止

如果在父级添加了同样的效果

子级的冒泡就在父级被中止了

试一试

弹框实例

jquery-事件冒泡

阻止默认行为,例如表单的提交按钮,默认行为是提交数据,可以通过。。。。

return false 可以起到阻止默认行为和阻止冒泡的效果

jquery-事件冒泡

弹框练习

结构

jquery-事件冒泡

jquery-事件冒泡
弹框效果

jquery-事件冒泡

蒙版

jquery-事件冒泡
置于最顶层
filter:alpha(opacity=30)的写法是兼容ie版本的透明度写法

效果

jquery-事件冒泡

JQUERY

点击按钮,蒙态框会显示

jquery-事件冒泡

期望的效果

点击蒙版区域,弹框会隐藏

jquery-事件冒泡

尝试解决

给弹框的容器加上了一个消失的效果

文档被点击后
jquery-事件冒泡

效果

如果点击按钮,会出现 先显示,又隐藏

原因, 冒泡了,事件

解决

jquery-事件冒泡

新问题

如果点击对话框的内部,也会出现消失的现象

非预期

解决

jquery-事件冒泡

来一个关闭蒙态框的按钮

jquery-事件冒泡

jquery-事件冒泡

jquery-事件冒泡