label绑定事件触发两次的问题

功能：点击每个多选复选框时，套餐价里的价格需要改变，状态不同时需要累加或减少，同时已选购的的数量需要改变

思路：

1. 拿到label，价格元素、数量元素
2. 使用forEash遍历所有laebl添加点击事件
3. 判断是否选中，选中时让数量++，同时把选中的多选框的价格加上原来价格赋值给选中后的套餐价

 

代码实现：

<div class="detail">                                      
    <div class="fitting">                                 
        <h4 class="kt">选择搭配</h4>                          
        <div class="good-suits">                          
            <div class="master">                          
                <img src="./images/l-m01.png" alt="">     
                <p>¥&nbsp;5299</p>                        
                <i>+</i>                                  
            </div>                                        
            <ul class="suits">                            
                <li class="suitsItem">                    
                    <img src="./images/dp01.png" alt="">  
                    <p>Feless费勒斯VR</p>                    
                    <label>                               
                        <input type="checkbox" value="39">
                        <span>39</span>                   
                    </label>                              
                </li>                                     
                <li class="suitsItem">                    
                    <img src="./images/dp02.png" alt="">  
                    <p>Feless费勒斯VR</p>                    
                    <label>                               
                        <input type="checkbox" value="50">
                        <span>50</span>                   
                    </label>                              
                </li>                                     
                <li class="suitsItem">                    
                    <img src="./images/dp03.png" alt="">  
                    <p>Feless费勒斯VR</p>                    
                    <label>                               
                        <input type="checkbox" value="59">
                        <span>59</span>                   
                    </label>                              
                </li>                                     
                <li class="suitsItem">                    
                    <img src="./images/dp04.png" alt="">  
                    <p>Feless费勒斯VR</p>                    
                    <label>                               
                        <input type="checkbox" value="99">
                        <span>99</span>                   
                    </label>                              
                </li>                                     
            </ul>                                         
            <div class="result">                          
                <div class="num">已选购0件商品</div>            
                <p class="price-tit">套餐价</p>              
                <p class="price">¥5299</p>                
                <button class="addShopcar">加入购物车</button> 
            </div>                                        
        </div>                                            
    </div>         
</div>                                       

setMenu()
// 套餐价
function setMenu() {
    var suits = document.querySelectorAll('.suits .suitsItem label')
    // 获取商品计件元素
    var count = document.querySelector('.result .num')
    // 初始化数量
    var checkNum = 0
    suits.forEach(function (item, index) {
        // 每个label绑定点击事件
        item.onclick = function () {
            // 点击选择按钮时，获取套餐价里面的价格，同时需要判断input的选中状态，进行相应的加减
            var oPrice = document.querySelector('.result .price')
            var tipPrice = +item.querySelector('span').textContent
            // 小件价格 在input节点
            // 判断是否被选中
            if(item.children[0].checked){
                checkNum++
                // 获取数量
                count.textContent = `已选购${checkNum}件商品`
                // 提取从1开始的字符串， 套餐价的价格，获取套餐价要实时获取
                var newPrice = +oPrice.textContent.slice(1)
                // console.log(tipPrice)
                oPrice.textContent = '￥' + (newPrice + tipPrice)

            }else{
                checkNum--
                // 获取数量,
                count.textContent = `已选购${checkNum}件商品`
                // 提取从1开始的字符串， 套餐价的价格
                var newPrice = +oPrice.textContent.slice(1)
                oPrice.textContent = '￥'+ (newPrice - tipPrice)
            }
        }
    })
}

现在实现后，就会产生一个效果，点击复选框可以计算执行，点击label其他元素就不会生效了，然后问了下大佬，才发现点击input其他地方进来执行了两次，也就是说里面会冒泡，本来想着阻止事件冒泡，结果下面的代码不执行了。

解决方法：给input绑定事件即可

setMenu()
// 套餐价
function setMenu() {
    var suits = document.querySelectorAll('.suits .suitsItem label input')
    // 获取商品计件元素
    var count = document.querySelector('.result .num')
    // 初始化数量
    var checkNum = 0
    suits.forEach(function (item, index) {
        // 每个label绑定点击事件
        item.onclick = function () {
            // 他会获取文本节点
            // console.log(item.nextSibling)
            // 点击选择按钮时，获取套餐价里面的价格，同时需要判断input的选中状态，进行相应的加减
            var oPrice = document.querySelector('.result .price')
            // 小件价格 在input节点
            var tipPrice = +item.nextElementSibling.textContent
            // 判断是否被选中
            if(item.checked){
                checkNum++
                // 获取数量
                count.textContent = `已选购${checkNum}件商品`
                // 提取从1开始的字符串， 套餐价的价格，获取套餐价要实时获取
                var newPrice = +oPrice.textContent.slice(1)
                // console.log(tipPrice)
                oPrice.textContent = '￥' + (newPrice + tipPrice)

            }else{
                checkNum--
                // 获取数量,
                count.textContent = `已选购${checkNum}件商品`
                // 提取从1开始的字符串， 套餐价的价格
                var newPrice = +oPrice.textContent.slice(1)
                oPrice.textContent = '￥'+ (newPrice - tipPrice)
            }
        }
    })
}

持续记录学习中遇到的问题，写的不是很好，还望谅解！