为什么点击切换复选框成为双击？

我目前正在制作一个checkbox，附带一个label。我使用for属性来链接复选框的点击。为什么点击切换复选框成为双击？

我也有一个jQuery功能，onclick为复选框和标签容器做了一个文本输入字段的滑动切换。

当我点击复选框时，只检测到一次点击并且文本字段很好地滑落。但是，当我点击标签时，似乎发生双击，文本字段向下滑动，然后立即备份。

我在我的复选框上输入了toggle-checkbox的ID，在我的标签上输入了for="toggle-checkbox"，我怀疑会以某种方式触发额外的点击。

HTML：

<div class="cart-summary__coupon-code"> 
    <div class="form-group js-coupon-code"> 
    <input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox"> 
    <label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox">click me</label> 
    </div> 
</div> 

<div class="coupon-code"> 
    <input type="text" /> 
</div>

的JavaScript：

jQuery('.js-coupon-code').click(function() { 
    $(".coupon-code").slideToggle("slow", function() { 
    }); 
});

CSS：

.coupon-code { 
    display: none; 
}

我有created a codepen其中问题可以重现。

来源

2016-02-02 Mikkel Fennefoss

检查这个问题：（？一式两份）http://stackoverflow.com/a/13756844/3582159 – GlabbichRulz

。因此，父级的点击事件触发两次事件冒泡。使用checkbox的点击事件而不是.js-coupon-code。

jQuery('#toggle-checkbox').click(function() { 
 
    $(".coupon-code").slideToggle("slow", function() {}); 
 
});

.coupon-code { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cart-summary__coupon-code"> 
 
    <div class="form-group js-coupon-code"> 
 
    <input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox"> 
 
    <label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox">click me</label> 
 
    </div> 
 
</div> 
 

 
<div class="coupon-code"> 
 
    <input type="text" /> 
 
</div>

来源

2016-02-02 09:54:33 Azim

你只需要preventDefault()

//toggle promo code input field 
jQuery('.js-coupon-code').click(function(e) { 
    e.preventDefault(); 
    $(".coupon-code").slideToggle("slow", function() { 
    }); 
});

来源

2016-02-02 09:48:08 miguelmpn

我建议从事件改变click到复选框change。当你在使用labelfor="toggle-checkbox"当你点击label它也火点击checkbox

jQuery('.cart-summary__coupon-code__checkbox').change(function() { 
    $(".coupon-code").slideToggle("slow", function() { 
    }); 
});

这里的固定codePen

来源

2016-02-02 09:53:23 Gvidas

只要可以绑定click事件input#toggle-checkbox。它也适用于其相应的label。

注：为什么我讲这个，你的样品中，你只是尝试的checkbox和label之间单击，就会出现你的触发操作。

检查这个例子：

jQuery('#toggle-checkbox').click(function() { 
 
    $(".coupon-code").slideToggle("slow", function() {}); 
 
});

.coupon-code { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="cart-summary__coupon-code"> 
 
    <div class="form-group js-coupon-code"> 
 
    <input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox"> 
 
    <label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox">click me</label> 
 
    </div> 
 
</div> 
 

 
<div class="coupon-code"> 
 
    <input type="text" /> 
 
</div>

来源

2016-02-02 09:55:09

为什么点击切换复选框成为双击？

回答

相关问题