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>
  • 相关阅读:
    flutter 3des
    flutter踩坑记
    【OS_Windows】彻底关闭windows10自动更新
    使用 httpclient 上传下载文件
    git操作
    jmeter在Windows下请求https的接口
    python xlsxwriter简单使用
    asp.net core webapi 文件下载实现
    使用微信小程序连接到 MQTT 云服务
    MQTT.js 入门教程
  • 原文地址:https://www.cnblogs.com/xiaoliu66007/p/6882380.html
Copyright © 2011-2022 走看看