zoukankan      html  css  js  c++  java
  • JQuery点击弹出层,单价空白区域隐藏弹出层(转帖)

             事件冒泡是指在jQuery元素集同一事件上绑定了多个方法,当我们触发其中某一方法时,

    将执行一系列方法,称之为事件冒泡取消事件冒泡的方式是:event.stopPropagation();

    首先列举一个简单的jQuery弹出层题目,在页面上定义一个弹出层和一个按钮,单击

    按钮在按钮的下方显示一个弹出层,单击任何空白区域或者弹出层,弹出层消失,

    该题目的解决方案为

     1 <script type="text/javascript">
    2 $(function(){
    3
    4 //动画速度
    5
    6 var speed = 500;
    7
    8 //绑定事件处理
    9
    10 $("#btnShow").click(function(event){
    11
    12
    13
    14 //取消事件冒泡
    15
    16
    17 event.stopPropagation();
    18
    19
    20 //设置弹出层位置
    21
    22
    23 var offset = $(event.target).offset();
    24
    25
    26 //设置弹出层位置
    27
    28 $("#divPop").css({top:offset.top+$(event.target).height()+"px",
    29
    30
    31
    32 left:offset.left});
    33
    34
    35
    36 //动画显示
    37
    38
    39
    40 $("#divPop").show(speed);
    41
    42
    43
    44 });
    45
    46
    47
    48 //单击空白区域隐藏弹出层
    49
    50
    51
    52 $(document).click(function(event){$("#divPop").hide(speed);});
    53
    54
    55
    56 });
    57
    58
    59
    60 </script>
  • 相关阅读:
    160-13. 罗马数字转整数
    159-118. 杨辉三角
    158-190. 颠倒二进制位
    157-461. 汉明距离
    156-412. Fizz Buzz
    155-278. 第一个错误的版本
    154-108. 将有序数组转换为二叉搜索树
    153-101. 对称二叉树
    152-234. 回文链表
    秒杀程序架构演进
  • 原文地址:https://www.cnblogs.com/BlackRian/p/2207293.html
Copyright © 2011-2022 走看看