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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实现tab栏切换效果
Dec 22 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
python基础教程之缩进介绍
2014/08/29 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python web基础之加载静态文件实例
2018/03/20 Python
python实现简单http服务器功能
2018/09/17 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
省三好学生申请材料
2014/01/22 职场文书
物流创业计划书
2014/02/01 职场文书
校园安全教育广播稿
2014/02/17 职场文书
材料员岗位职责
2014/03/13 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
公司员工辞职信范文
2015/05/12 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
python字符串常规操作大全
2021/05/02 Python
python控制台打印log输出重复的解决方法
2021/05/14 Python
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
mysql查找连续出现n次以上的数字
2022/05/11 MySQL