zoukankan      html  css  js  c++  java
  • 父级元素点击,遮盖了子元素的点击

    1.场景1:组织消息上传,点击父元素,禁止子元素的事件执行

    event.cancelBubble=true 的使用

    <html>
    <body>
    <table border="1" width="26%" id="tableA" onclick="alert('tableA')">
    <tr onclick="tableA_rowA_click()">
       <td width="106">一般</td>
    </tr>
    <tr onclick="tableA_rowB_click()">
       <td width="106">阻止消息上传</td>
    </tr>
    </table>
    
    </body>
    </html>
    <script language="javascript">
    <!--
    function tableA_rowA_click(){
      alert('1');
      //结果,alert 出:
      tableA 和 1
      */

    }
    function tableA_rowB_click(){   
      alert(
    '2');   
      event.cancelBubble
    =true;
      //结果,alert 出:
      tableA

      */
    }
    //-->
    </script>

     如图 

    $('.orderDetail-table input').on('click',function(e){
    e.stopPropagation();
    });

    2.场景2,tr加了点击事件,覆盖了checkbox的点击选中,

    解决方式:在需要加事件的被覆子元素上加事件

    <tr class="onhover" onclick="toggleCheckedBox(@p.id);">
    <td><input id="checkedbox_@p.id" type="checkbox" name="payid" value="@p.id" onclick="toggleCheckedBox(@p.id);"></td>
    <td>222</td>
    <td>2222</td>
    </tr>
  • 相关阅读:
    7.Mongodb安全性流程
    6.Mongodb索引
    5.Mongodb聚合
    8-进程管理
    7-安装包管理
    6-文件系统
    5-权限用户组
    27-ATM+购物车程序
    26.本章小结
    名词解释
  • 原文地址:https://www.cnblogs.com/xiaoliu66007/p/6882380.html
Copyright © 2011-2022 走看看