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实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jquery自定义组件实例详解
Dec 31 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 和 HTML
2006/10/09 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python之Character string(实例讲解)
2017/09/25 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python中树与树的表示知识点总结
2019/09/14 Python
聚网科技C++面试笔试题
2015/09/01 面试题
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
北京华建集团SQL面试题
2014/06/03 面试题
公司年会演讲稿范文
2014/01/11 职场文书
工作态度检讨书
2014/02/11 职场文书
经典商业广告词
2014/03/13 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
基于Python实现将列表数据生成折线图
2022/03/23 Python