博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery如何阻止事件冒泡
阅读量:4118 次
发布时间:2019-05-25

本文共 753 字,大约阅读时间需要 2 分钟。

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡。

通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡。

  
    外层div    
内层div
  

显示结果

对应的jQuery代码如下:

    

当点击小div时,会触发大div与body 的点击事件。点击大div时会触发body的点击事件。

如何防止这种冒泡事件发生呢?

修改如下:

    

event.stopPropagation(); // 阻止事件冒泡

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

html部分

        
用户名:

    
//阻止默认行为 ( 表单提交 )event.preventDefault();

还有一种防止默认行为的方法就是return false。效果一样。

代码如下:

    

 同理,上面的冒泡事件也可以通过return false来处理

    

本文完〜

转载地址:http://yxbpi.baihongyu.com/

你可能感兴趣的文章
Linux基础系列-Kernel 初始化宏
查看>>
Linux子系统系列-I2C
查看>>
<iOS>关于自定义description的一点用法
查看>>
Unix 命令,常用到的
查看>>
DLL中建立进程共享数据段需要注意的语法问题
查看>>
服务器端技术----Http请求的处理过程
查看>>
C语言-预处理指令2-条件编译
查看>>
C语言-预处理指令3-文件包含
查看>>
C语言-变量类型
查看>>
C语言-static和extern关键字1-对函数的作用
查看>>
C 语言-static和extern关键字2-对变量的作用
查看>>
【JavaScript 教程】浏览器—History 对象
查看>>
还不会正则表达式?看这篇!
查看>>
100道+ JavaScript 面试题,助你查漏补缺
查看>>
JavaScript深入理解之闭包
查看>>
这才是学习Vite2的正确姿势!
查看>>
7 个适用于所有前端开发人员的很棒API,你需要了解一下
查看>>
25个构建Web项目的HTML建议,你需要了解一下!
查看>>
【web素材】02-10款大气的购物商城网站模板
查看>>
6种方式实现JavaScript数组扁平化(flat)方法的总结
查看>>