zoukankan      html  css  js  c++  java
  • 1) 嵌套的 div ,或者 ul ol .li 阻止冒泡 ,特别是 对应onclick="test(event)" 通过传递event 阻止 冒泡. cancelBubble , stopPropagation

    1 .html 结构:

     1                 <ul class="ul_2 hide" data-first="5">
     2                     <li class="li_2" onclick="getSecond(this, 6)">5学习目标
     3                         <ul class="ul_3">
     4                             <li class="li_3" onclick="getThird(this, 11, event)">1.视频展示视频展示视频展示视频展示</li>
     5                             <li class="li_3" onclick="getThird(this, 11, event)">2.学习评价</li>
     6                             <li class="li_3" onclick="getThird(this, 11, event)">3.小组评价</li>
     7                         </ul>
     8                     </li>
     9                     <li class="li_2" onclick="getSecond(this, 7)">课前学习</li>
    10                     <li class="li_2" onclick="getSecond(this, 8)">教学活动
    11                         <ul class="ul_3">
    12                             <li class="li_3" onclick="getThird(this, 11, event)">1.视频展示</li>
    13                             <li class="li_3" onclick="getThird(this, 11, event)">2.学习评价</li>
    14                             <li class="li_3" onclick="getThird(this, 11, event)">3.小组评价</li>
    15                             <li class="li_3" onclick="getThird(this, 11, event)">4.小组评价</li>
    16                         </ul>
    17                     </li>
    18                     <li class="li_2" onclick="getSecond(this, 9)">课后练习</li>
    19                     <li class="li_2" onclick="getSecond(this, 10)">师生论坛
    20                         <ul class="ul_3">
    21                             <li class="li_3" onclick="getThird(this, 11, event);">1.测试视频展示</li>
    22                             <li class="li_3" onclick="getThird(this, 11, event);">2.学习评价</li>
    23                             <li class="li_3" onclick="getThird(this, 11, event);">3.小组评价</li>
    24                         </ul>
    25                     </li>
    26                 </ul>

    重要部分: getThird(this, 11, event)

    其中传递event.

    2. js

     1         /**
     2          * [getThird 1)获取三级导航的数据]
     3          * @param  {[type]} node    [description]
     4          * @param  {[type]} thirdId [description]
     5          * @return {[type]}         [description]
     6          */
     7         function getThird(node, thirdId, e)
     8         {
     9             // console.log(333);
    10             // console.log(e);
    11             //当前三级增加效果 + 去除同级 的三级效果:
    12             $(node).addClass("selectThird").siblings(".li_3").removeClass("selectThird");
    13 
    14             //自己的父级(二级)增加效果 + 同级的二级及其子级去除效果:
    15             $(node).parents(".li_2").addClass("selectSecond").siblings(".li_2").removeClass("selectSecond").find(".li_3").removeClass("selectThird");
    16 
    17 
    18             // getContent(thirdId, 3);
    19 
    20             cancelBubble(e);
    21         }
    1         function cancelBubble(e) {
    2                     var evt = e ? e : window.event;
    3                         if (evt.stopPropagation) {        //W3C
    4                            evt.stopPropagation();
    5                         }else {       //IE
    6                            evt.cancelBubble = true;
    7                         }
    8         }
  • 相关阅读:
    hibernate
    杨辉三角
    查看端口号
    一个线程同步问题的例子
    SQL关系数据库设计三大范式
    C#OpenFileDialog的使用
    莫队算法
    蒟蒻已知的高能数学公式
    C++ 产生随机数
    C++ 输出小数点后 n 位
  • 原文地址:https://www.cnblogs.com/cbza/p/7383755.html
Copyright © 2011-2022 走看看