jquery-事件冒泡
  TEZNKK3IfmPf 2023年11月13日 19 0
考点
事件中的匿名函数,如果有一个形参e,请问这个形参e是什么
事件对象
该对象中有一个stopPropagation()方法,可以阻止事件向上级冒泡
例如:$(".son").click(function(e){代码})

如何阻止事件向上冒泡
事件对象.stopPropagation()

如何阻止标签对象的默认行为
事件对象.preventDefault()
比例,表单标签对象的submit方法会默认把表单的数据进行提交,如果我们希望阻止这个行为



同时阻止事件的冒泡与标签对象的默认行为
return false

jquery-事件冒泡_事件对象

用例子来说明

jquery-事件冒泡_用例_02
页面的布局

jquery-事件冒泡_匿名函数_03

样子

jquery-事件冒泡_用例_04

绑定事件

jquery-事件冒泡_jquery_05

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

jquery-事件冒泡_jquery_06

jquery-事件冒泡_匿名函数_08

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

外层也会得到对应的事件

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

是以标签布局的效果来的

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

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

阻止事件的冒泡

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

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

jquery-事件冒泡_匿名函数_09

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

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

就在子级进行阻止

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

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

试一试

弹框实例

jquery-事件冒泡_用例_10

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

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

jquery-事件冒泡_事件对象_11

弹框练习

结构

jquery-事件冒泡_匿名函数_12

jquery-事件冒泡_事件对象_13
弹框效果

jquery-事件冒泡_表单_14

蒙版

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

效果

jquery-事件冒泡_匿名函数_16

JQUERY

点击按钮,蒙态框会显示

jquery-事件冒泡_表单_17

期望的效果

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

jquery-事件冒泡_表单_18

尝试解决

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

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

效果

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

原因, 冒泡了,事件

解决

jquery-事件冒泡_表单_20

新问题

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

非预期

解决

jquery-事件冒泡_事件对象_21

来一个关闭蒙态框的按钮

jquery-事件冒泡_用例_22

jquery-事件冒泡_事件对象_23

jquery-事件冒泡_事件对象_24

英语

jquery-事件冒泡_匿名函数_25

怕破给性

谣言,止于智者

如何阻止冒泡的传播

事件的匿名函数中给一个形参

这个形参就是事件对象

可以在匿函内部,调一下这个事件对象的 stopPropagation()

防止

jquery-事件冒泡_jquery_26

破锐闻特

pre闻特

默认的

jquery-事件冒泡_用例_27

帝佛特

preventDefault,阻止默认行为

form表单中input标签type为button与submit的区别

jquery-事件冒泡_事件对象_28

注意

事件(匿函)

事件方法中匿名函数的形参,第一个,就是事件对象。

事件对象现学到的有两个方法

1,阻止默认行为

2,防止冒泡

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月13日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2023年11月15日   30   0   0 jQuery
  TEZNKK3IfmPf   2023年11月15日   20   0   0 事件WPF
  TEZNKK3IfmPf   2023年11月15日   68   0   0 jQueryjs
  TEZNKK3IfmPf   2024年03月22日   68   0   0 jQueryeasyui
  TEZNKK3IfmPf   2023年11月14日   77   0   0 jQuery
  TEZNKK3IfmPf   2024年03月29日   52   0   0 htmljQuery
  TEZNKK3IfmPf   2024年05月31日   31   0   0 jQuery选择器
TEZNKK3IfmPf