jquery-事件冒泡
用例子来说明
页面的布局
样子
绑定事件
如果点击了son
会触发本身,父级,爷级的click事件
即便把位置移开,点击son标签
外层也会得到对应的事件
说明,冒泡效果,不是以看到的效果为准的
是以标签布局的效果来的
试一试,利用定位让他们位置错开
点击偏移了的盒子,体验效果
阻止事件的冒泡
事件包裹的匿名函数中如果有形参。这个形参就是事件对象。
利用事件对象的一个方法来阻止。
阻止的位置添加被点击的层级
如果是子级点击,不希望事件被传递到上一级
就在子级进行阻止
如果在父级添加了同样的效果
子级的冒泡就在父级被中止了
试一试
弹框实例
阻止默认行为,例如表单的提交按钮,默认行为是提交数据,可以通过。。。。
return false 可以起到阻止默认行为和阻止冒泡的效果
弹框练习
结构
弹框效果
蒙版
置于最顶层
filter:alpha(opacity=30)的写法是兼容ie版本的透明度写法
效果
JQUERY
点击按钮,蒙态框会显示
期望的效果
点击蒙版区域,弹框会隐藏
尝试解决
给弹框的容器加上了一个消失的效果
文档被点击后
效果
如果点击按钮,会出现 先显示,又隐藏
原因, 冒泡了,事件
解决
新问题
如果点击对话框的内部,也会出现消失的现象
非预期
解决
来一个关闭蒙态框的按钮