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         }
  • 相关阅读:
    最大子序列和问题之算法优化
    数据揭秘:低学历成功逆袭概率有多少?感谢父母送我读书!
    据说这份高考卷,只有程序员能得满分!
    牛客OI赛制测试赛2
    斯特林公式
    N!的近似值_斯特林公式
    矩阵快速幂
    回文树
    回文树入门
    环和链的判断
  • 原文地址:https://www.cnblogs.com/cbza/p/7383755.html
Copyright © 2011-2022 走看看