zoukankan      html  css  js  c++  java
  • jQuery中事件对象e的事件冒泡用法示例(事件冒泡与阻止冒泡)

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>事件冒泡与阻止冒泡</title>
     6 <script src="js/jquery.min.js" type="text/javascript"></script>
     7 </head>
     8 <body>
     9 <script type="text/javascript">
    10 $(function () {
    11 $("div li").click(function (e) {
    12 alert("我是li");
    13 })
    14 $("div ul").click(function (e) { //这个e其实就是event 是一个事件的对象
    15 alert("我是ul");
    16 e.stopPropagation(); //e.stopPropagation();就是阻止冒泡,如果不写这句,在弹出 “我是li”后就会弹出“我是ul”,然后就会弹出“我是div”。在这里添加了e.stopPropagation();之后,“我是div”就不会弹出来了。因为已经被阻止了。其实这句也可也用 return false来替代
    17 })
    18 $("div").click(function (e) {
    19 alert("我是div");
    20 })
    21 })
    22 </script>
    23 <div>
    24 <ul>
    25 <!-- li在ul里,ul在div中,只要点击了li,也就是点击了ul,也就是点击了div。在上面的函数中,先弹出 “我是li”然后弹出“我是ul”,最后弹出“我是div” 一层一层的冒泡,而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。这个事件的对象就是函数的参数 e 这个e的名字可以随便取-->
    26 <li>请点击我</li>
    27 </ul>
    28 </div>
    29 </body>
    30 </html>
  • 相关阅读:
    <转>CSS3 Media Queries 实现响应式设计
    css3的display:box研究
    CSS3制作渐变文字
    (转)apple-touch-icon-precomposed 和 apple-touch-icon属性区别
    (转)移动平台的meta标签
    day 57 jQuery插件
    day56 文件 文档处理,事件
    day 55 jQuery-part2
    day 54 jQuery, part-1
    day 52 dom 事件
  • 原文地址:https://www.cnblogs.com/nifengs/p/4800794.html
Copyright © 2011-2022 走看看