如何不在 children 上触发点击事件

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>

单击任何输入时，我不想单击或触发单击 parent 元素 (#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

使用 stopPropagation() : 避免冒泡或捕获。

$("#label_authorize_net *").click(function(event){
    event.stopPropagation(); 
});

或者按照的建议，而不是 *，使用特定的选择器来获取所需的子项。

Answer 2

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

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

如何不在 children 上触发点击事件

how to not trigger a click event on children

jquery

input

selector