JQuery事件冒泡和默认行为代码实例


Posted in jQuery onMay 13, 2020

事件的冒泡

什么是事件的冒泡?

就是事件从子元素向父元素传递的一个过程

如何阻止事件的冒泡?

方式一:在事件的回调函数中加上return false;

方式二:在事件回调函数的形参列表中添加event,然后在回调函数中调用event.stopPropagation();.

事件的默认行为

什么是事件的默认行为?

就是像a标签那样,没有绑定事件,但只要点击了就会自动跳转的行为

像提交按钮一样,没有绑定事件,但是点击就会提交表单信息,自动跳转

如何阻止事件的默认行为?

方式一:在事件的回调函数中加上return false;

方式二:在事件回调函数的形参列表中添加event,然后在回调函数中调用event.stopPropagation();.

示例代码

HTML以及css代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>23-jQuery事件的冒泡和默认行为</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .father{
      width: 400px;
      height: 400px;
      background-color: brown;
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
  

</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<form action="http://www.baidu.com">
  <input type="text">
  <input type="submit" value="提交">
</form>

</body>
</html>

JavaScript代码(用到了jquery-1.11.3.js)

<script src="../js/jquery-1.11.3.js"></script>
<script>

    $(function () {
      $(".father").click(function () {
        alert("father");
      });
      $(".son").click(function (event) {
        alert("son");
        // return false;  // 方式一
        // 阻止子元素点击事件的冒泡
        event.stopPropagation();  // 方式二
      });


      $("input[type=submit]").click(function (event) {
        // return false;  // 方式一
        // 取消提交按钮的默认行为
        event.preventDefault();
      });

    });
</script>

运行效果

JQuery事件冒泡和默认行为代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery实现聊天机器人
Feb 08 jQuery
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 #jQuery
基于JQuery实现页面定时弹出广告
May 08 #jQuery
JQuery复选框全选效果如何实现
May 08 #jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
jquery实现手风琴案例
May 04 #jQuery
You might like
如何做到多笔资料的同步
2006/10/09 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
Python实现新浪博客备份的方法
2016/04/27 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
年终晚会活动方案
2014/08/21 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
班主任2015新年寄语
2014/12/08 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
解决Oracle数据库用户密码过期
2022/05/11 Oracle
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS
TS 类型兼容教程示例详解
2022/09/23 Javascript