jquery - 如何不触发 child 的点击事件

Question

这是 html:

<label id="label_authorize_net" for="payment_authorize_net" class="for_guest_and_register">
                      <strong>Credit Card</strong>
                      <br/>
                      <input type="radio" name="payment_method" class="payment_authorize_net" id="payment_authorize_net" value="authorize_net" /><?php echo $lang_client_['checkout']['ADDITIONAL_CHARGE']; ?> <?php echo $currency_l.num_formatt($authorize_net['surcharge']).$currency_r; ?>
                      <input type="hidden" class="value-payment" value="" />
                      <div id="credit_card_fields">
                        <label for="cc_number">
                            Card Number:
                            <input type="text" class="required cc_field" name="cc_number" id="cc_number" />
                        </label>
                        <label for="cvc_number">
                            CVC Number:
                            <input type="text" class="required cc_field" name="cvc_number" id="cvc_number" />
                        </label>
                        <label for="exp_date">
                            Expiration Date:
                            <input type="text" class="required cc_field" name="exp_date" id="exp_date" value="mm/yy" />
                        </label>
                      </div>
                  </label>

当单击任何输入时，我不想单击或触发单击父元素(#label_authorize_net)。这是我的 jquery:

$("#label_authorize_net").click(function(){
        $css_display = $("#credit_card_fields").css("display");
        if($css_display === "none") $("#credit_card_fields").css("display","block");
        else $("#credit_card_fields").css("display","none");
    });

假设您单击#label_authorize_net中的输入元素，我不希望它触发上述jquery，那么我该怎么做？

Answer 1

根据我上面的评论，因为您的标签没有自己的任何文本内容，所以您不能使用 .children()或*选择器，因为您将始终单击子元素。相反，针对特定元素来停止传播。例如，忽略来自 <input> 的点击元素...

$("#label_authorize_net").on('click', function() {
    // your code
}).find('input').on('click', function(e) {
    e.stopPropagation();
});