子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：

呈现，看起来像是

当点击标识为order_details_trigger的div时，我正尝试做某事（弹出一个包含更多详细信息的模态），但是现在，只有当我点击它之间的微小空格时它才会触发有信息的div（我在屏幕截图中放置了红色框）。

有关为何发生这种情况的任何想法？谢谢你，如果你完成了这一切！

Answer 1

将pointer-events: none;添加到子div的样式。