javascript - 子 div 掩盖了对其父 div 的点击

Question

不久前，我发布了一个关于父 div 对点击事件没有反应的问题，因为它的子元素似乎在掩盖它。我无法在不显示一堆代码的情况下复制它，而且我真的不想这样做，因为这似乎有很多问题要问，但由于我仍然遇到问题，我希望有人能花时间仔细研究一下。我很困惑!

使用 vktemplate获取一个 json 对象并将其插入到我的页面中:(我认为这是唯一相关的部分，但整个代码是 here ...大约另外 50 行。)

<div class='order_and_lines_container_div' id='order_container_<%= o[order]['order_header'].order_number %>' >

    <div id="order_details_button_<%=o[order]['order_header'].order_number %>" class='fl order_details_trigger' >

    <% if ( o[order]['order_header'].reference ) { %>

        <input type='hidden' id="reference_<%= o[order]['order_header'].order_number %>" value="<%= o[order]['order_header'].reference %>" />

    <% } %>

        <!-- //shipping data-->
        <input type='hidden' id='ship_to_name' value="<%= o[order]['order_header'].ship_to_name %>" />

        <input type='hidden' id='ship_to_address_1' value="<%= o[order]['order_header'].ship_to_address1 %>" />

        <input type='hidden' id='ship_to_address_2' value="<%= o[order]['order_header'].ship_to_address2 %>" />

        <input type='hidden' id='ship_to_city' value="<%= o[order]['order_header'].ship_to_city %>" />

        <input type='hidden' id='ship_to_zipcode' value="<%= o[order]['order_header'].ship_to_zipcode %>" />



        <% var escaped_title_for_customer = (o[order]['order_header'].name).replace("'", "");

        escaped_title_for_customer = (escaped_title_for_customer).replace('"', ''); %>


        <div class='fl cell_div for_customer_div clip' value='<%= escaped_title_for_customer %>'>

            <div class='tooltip' style='width:215px;overflow:hidden;' title='<%= escaped_title_for_customer %>'>

            <%= o[order]['order_header'].name %>

            </div>

       </div>


       <div class='fl cell_div order_number_div' id='order_number_div_<%= o[order]['order_header'].order_number %>'>

       <%= o[order]['order_header'].order_number %>

       </div>       

       <div class='fl cell_div order_status_div'>

       <%= o[order]['order_header'].status %>

       </div>

       <div class='fl cell_div order_date_div'> 

       <%= o[order]['order_header'].order_date %> 

       </div>

       <div class='fl cell_div scheduled_ship_date_div'>

       <%= o[order]['order_header'].due_date %>

       </div>


        <% if ( o[order]['order_header'].order_description ) {


            var escaped_title_description = (o[order]['order_header'].order_description).replace("'", "");

            escaped_title_description = (escaped_title_description).replace('"', ''); %>

            <div class='fl cell_div project_name_div tooltip' value='<%= escaped_title_description %>' title='<%= escaped_title_description %>'>

            <%= o[order]['order_header'].order_description %>

            </div>


        <% } %> 


         <div class='cb'></div>  

     </div>

//more

<% } %>

我生成这个 html:

渲染，看起来像

当单击 ID 为 order_details_trigger 的 div 时，我正在尝试做一些事情(弹出一个包含更详细信息的模式)，但现在，它仅在我单击微小的时触发包含信息的 div 之间的空格(我将红色框放在屏幕截图中的位置)。

关于为什么会发生这种情况的任何想法？感谢您度过了这一切!

Answer 1

在子 div 的样式中添加 pointer-events: none;。