jquery-事件冒泡

最新推荐文章于 2022-03-09 19:42:33 发布
原创 最新推荐文章于 2022-03-09 19:42:33 发布 · 423 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客围绕页面事件处理展开，介绍了冒泡效果以标签布局为准，可利用事件对象方法阻止冒泡；还提及弹框实例中阻止默认行为，如表单提交按钮；在弹框练习里解决了点击显示隐藏异常问题；最后阐述了form表单中input标签type为button与submit的区别及事件对象的两个方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

考点

事件中的匿名函数，如果有一个形参e，请问这个形参e是什么
事件对象
该对象中有一个stopPropagation()方法，可以阻止事件向上级冒泡
例如：$(".son").click(function(e){代码})

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

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



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

在这里插入图片描述

用例子来说明

在这里插入图片描述
页面的布局

在这里插入图片描述

样子

在这里插入图片描述

绑定事件

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

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

外层也会得到对应的事件

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

是以标签布局的效果来的

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

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

阻止事件的冒泡

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

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

在这里插入图片描述

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

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

就在子级进行阻止

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

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

试一试

弹框实例

在这里插入图片描述

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

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

在这里插入图片描述

弹框练习

结构

在这里插入图片描述

在这里插入图片描述
弹框效果

在这里插入图片描述

蒙版

在这里插入图片描述
置于最顶层
filter:alpha(opacity=30)的写法是兼容ie版本的透明度写法

效果

在这里插入图片描述

JQUERY

点击按钮，蒙态框会显示

在这里插入图片描述

期望的效果

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

在这里插入图片描述

尝试解决

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

文档被点击后
在这里插入图片描述

效果

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

原因， 冒泡了，事件

解决

在这里插入图片描述

新问题

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

非预期

解决

在这里插入图片描述

来一个关闭蒙态框的按钮

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

英语

在这里插入图片描述

怕破给性

谣言，止于智者

如何阻止冒泡的传播

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

这个形参就是事件对象

可以在匿函内部，调一下这个事件对象的 stopPropagation（）

防止

在这里插入图片描述

破锐闻特

pre闻特

默认的

在这里插入图片描述

帝佛特

preventDefault，阻止默认行为

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

在这里插入图片描述

注意

事件（匿函）

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

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

1，阻止默认行为

2，防止冒泡

jQuery操作事件（含冒泡现象及解决方案）
yjp1240201821的博客
08-17 1270
本文主要讲解jQuery操作事件，事件冒泡及讲解、事件绑定、解绑、切换等
Jquery 事件冒泡
weixin_30258901的博客
03-22 175
原文链接http://blog.163.com/chtx87_98/blog/static/654011192011830928585/ 原文链接二：http://hi.baidu.com/armyknife/blog/item/60ddc6c378b00847b219a81b.html （1）什么是事件起泡首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，...
jQuery事件冒泡
li840793179的博客
03-09 2491
开始前，我就想问几个问题。 什么是事件冒泡 如何阻止事件冒泡 先看代码图、设置两个盒子，用一个盒子包着另一个盒子，外边的盒子我给它红色、里边的盒子我给它蓝色，用jQuery赋予两个盒子点击事件 当你点击外边的盒子时，提示框会弹出“fanther”如下图 当你点击里边的盒子时。提示框会依次弹出“son”和“fanther”。 如果子元素和父元素同时注册了点击事件或其他事件，在子元素响应事件的时候父元素也会跟着响应事件，这就是事件的冒泡，事件冒泡就是事...
jQuery 事件冒泡
柯晓楠
11-28 3162
jQuery 事件冒泡解释 官方解释： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 草根解释： 当我们在某一个元素上去触发一个事件时，比如鼠标移动事件，该元素所绑定的事件也会影响到其子元素，或者是在
事件冒泡
Shaun's blog
08-08 484
什么是事件冒泡 :在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作用 :事件冒泡允许多个
jquery冒泡事件
abysstoabyss的专栏
06-21 715
解释冒泡事件，就是这样的层级关系，body，div,span都添加了一个事件，而当我们点击内部事件时，相当于也点击了div，body上的事件，而且这个会按照特定的顺序执行click事件，先span ,然后div，最后body. 有时候，这样的冒泡事件会到来副作用，我们家只想要响应span的click事件。所以有必要对事件的范围做一个限制。 这样就引出了事件对象。 jquery 的事件对象很简
jQuery事件冒泡，事件委托，多库共存，入口函数
摸鱼小队
12-22 494
一，事件冒泡 问题描述： 冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。 通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的耳朵里，这时候，你可能躲在被窝里，或者墙壁的隔音效果很好，阻隔声音可以理解为阻止冒泡。 阻
JQuery中的事件 (四.事件冒泡)
妖怪的博客
03-22 841
阻止默认行为和停止时间冒泡;
jquery 事件冒泡
cysear的专栏
02-18 308
外层div元素 内层span元素 外层div元素 $(function(){ // 为span元素绑定click事件 $('p').bind('click',function(){ var txt = $("#msg").html()+'内层span元素被单击'; $("#msg").h
jQuery冒泡事件
Yu的博客
11-30 319
$(function() { $("div").on("click",divClickHandler); //$("div").on("click",divClickHandler1); $(document).on("click",documentClickHandler); }); function divClickHandler(e) { console.log("d
jquery 事件冒泡,事件委托
小赵的呢
08-07 158
事件冒泡 什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你
jQuery 事件冒泡及解决
m0_56557880的博客
10-08 601
在jQuery中点击触发事件的时候，有时候会导致其他事件一同触发，其他事件一般为该盒子的父元素的事件：例如创建一个div里面包含一个div： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值