jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例


Posted in jQuery onMay 13, 2019

本文实例讲述了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用。分享给大家供大家参考,具体如下:

事件的绑定和解绑

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#div1').bind('mouseover click',function (event) {//绑定事件:移动到div块上和点击
        alert($(this).html);
        $(this).unbind('mouseover');//取消鼠标移动到上面的事件
      })
    })
  </script>
  <style type="text/css">
    #div1{
      background-color: #f6b544;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="div1">
  </div>
</body>
</html>

绑定事件:移动到div块上和点击

解绑事件:取消鼠标移动到上面的事件

事件冒泡-阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('.son').click(function () {
        alert(1);
      });
      $('.father').bind('click',function () {
        alert(2);
      });
      $('.grandfather').bind('click',function () {
        alert(3);
      });
    })
  </script>
  <style type="text/css">
    .grandfather{
      width: 300px;
      height: 300px;
      background-color: green;
    }
    .father{
      width: 200px;
      height: 200px;
      background-color: gold;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="grandfather">
    <div class="father">
      <div class="son">
      </div>
    </div>
  </div>
</body>
</html>

定义了三个div,在son点击一下弹出1,father点击一下弹出2,grandfather点击一下弹出3,如果我们点击son一下,那么会依次弹出123,点击father一下会依次弹出二三。

按照标签往上传到它的父级

事件冒泡有时候不需要,需要阻止,通过eventstopPropagation()来阻止

$('.son').click(function (event) {//event就是一个事件对象
  //用这个事件对象就能使用事件对象的方法
  alert(1);
  event.stopPropagation();//阻止事件对象冒泡
});

除了阻止事件冒泡,还要阻止一些默认行为,开发中直接return false就行。

$('.father').bind('click',function () {
  alert(2);
  //阻止事件冒泡和阻止默认行为的同意写法
  return false;
});

弹框

点击弹框外面关闭弹框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#btn').click(function () {
         // alert(2);
         $('.pop_con').fadeIn();
         // alert(1);
        return false;//阻止事件,冒泡
      });
      $(document).click(function () {
        $('.pop_con').fadeOut();
      })
    })
  </script>
</head>
<style type="text/css">
  .pop{
    position: fixed;
    width: 500px;
    height: 300px;
    background-color: #fff;
    border: 3px solid #000;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -150px;/*拉回去*/
    z-index: 2;
  }
  .mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
    filter:alpha(opacity=30);/*兼容ie浏览器的*/
    left: 0;
    top: 0;
    z-index: 1;/*z-index设置现实层级*/
  }
  .pop_con{
    display: none;/*因为pop_con包含住了mask和pop,所以设置了这个之后,他们就隐藏了*/
  }
</style>
<body>
  <input type="button" name="" value="弹出" id="btn">
  <div class="pop_con">
    <div class="pop">
      弹框里面的文字
    </div>
    <div class="mask"></div>
  </div>
</body>
</html>

如果不组织事件冒泡的话,点击之后,弹框出现之后,就会直接隐藏,只有阻止之后,才能点击外框的document或者mask才能隐藏弹框。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
使vue实现jQuery调用的两种方法
May 12 #jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 #jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
详解jQuery如何实现模糊搜索
May 10 #jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
jquery登录的异步验证操作示例
May 09 #jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
JavaScript中this详解
2015/09/01 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
SVG描边动画
2017/02/23 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Python类的继承super相关原理解析
2020/10/22 Python
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
2015年班组建设工作总结
2015/05/13 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
python 学习GCN图卷积神经网络
2022/05/11 Python