javascript - 親 div のクリックを隠す子 div

Question

少し前に、親の div がクリック イベントに反応しないという質問を投稿しました。たくさんのコードを表示せずに複製することはできませんでした。また、質問するのが多すぎるように思われるため、実際にはやりたくありませんでしたが、まだ問題があるため、誰かが時間をかけてこれを調べてくれることを願っています. 私はかなり混乱しています！

vktemplateを使用して json オブジェクトを取得し、次のようにページに挿入します (関連する部分はこれだけだと思いますが、コード全体はここにあります... さらに 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を持つdivがクリックされたときに何かをしようとしていorder_details_triggerます(より詳細な情報を含むモーダルをポップアップします)が、現在、情報があるdiv間の小さなスペースをクリックしたときにのみ起動します(場所スクリーンショットに赤いボックスを入れました）。

なぜこれが起こっているのかについてのアイデアはありますか? これをすべてやり遂げたなら、ありがとう！

Answer 1

pointer-events: none;子divのスタイルに追加します。