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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery实现简单飞机大战
Jul 05 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP的博客ping服务代码
2012/02/04 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
python实现简单的socket server实例
2015/04/29 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python中函数参数调用方式分析
2018/08/09 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
创建Django项目图文实例详解
2019/06/06 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
对Django url的几种使用方式详解
2019/08/06 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
用Python进行websocket接口测试
2020/10/16 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
社区元宵节活动总结
2015/02/06 职场文书
中秋节晚会开场白
2015/05/29 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript