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

使用stopPropagation()：避免冒泡或捕捉。

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

或建议使用Phil而不是*，使用特定的选择器来获取所需的孩子。

Answer 2

根据我上面的评论，由于您的标签没有自己的任何文字内容，因此您无法使用.children()或*选择器。我总是点击一个子元素。相反，目标特定元素停止传播。例如，要忽略来自<input>元素的点击次数...

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

如何不触发对儿童的点击事件

2 个答案: