欢迎光临
我的个人博客网站

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


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

思路:

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

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

 

代码实现:

 1 <div class="detail">                                        2     <div class="fitting">                                   3         <h4 class="kt">选择搭配</h4>                            4         <div class="good-suits">                            5             <div class="master">                            6                 <img src="./images/l-m01.png" alt="">       7                 <p>¥&nbsp;5299</p>                          8                 <i>+</i>                                    9             </div>                                         10             <ul class="suits">                             11                 <li class="suitsItem">                     12                     <img src="./images/dp01.png" alt="">   13                     <p>Feless费勒斯VR</p>                     14                     <label>                                15                         <input type="checkbox" value="39"> 16                         <span>39</span>                    17                     </label>                               18                 </li>                                      19                 <li class="suitsItem">                     20                     <img src="./images/dp02.png" alt="">   21                     <p>Feless费勒斯VR</p>                     22                     <label>                                23                         <input type="checkbox" value="50"> 24                         <span>50</span>                    25                     </label>                               26                 </li>                                      27                 <li class="suitsItem">                     28                     <img src="./images/dp03.png" alt="">   29                     <p>Feless费勒斯VR</p>                     30                     <label>                                31                         <input type="checkbox" value="59"> 32                         <span>59</span>                    33                     </label>                               34                 </li>                                      35                 <li class="suitsItem">                     36                     <img src="./images/dp04.png" alt="">   37                     <p>Feless费勒斯VR</p>                     38                     <label>                                39                         <input type="checkbox" value="99"> 40                         <span>99</span>                    41                     </label>                               42                 </li>                                      43             </ul>                                          44             <div class="result">                           45                 <div class="num">已选购0件商品</div>             46                 <p class="price-tit">套餐价</p>               47                 <p class="price">¥5299</p>                 48                 <button class="addShopcar">加入购物车</button>  49             </div>                                         50         </div>                                             51     </div>          52 </div>                                       

 1 setMenu()  2 // 套餐价  3 function setMenu() {  4     var suits = document.querySelectorAll('.suits .suitsItem label')  5     // 获取商品计件元素  6     var count = document.querySelector('.result .num')  7     // 初始化数量  8     var checkNum = 0  9     suits.forEach(function (item, index) { 10         // 每个label绑定点击事件 11         item.onclick = function () { 12             // 点击选择按钮时,获取套餐价里面的价格,同时需要判断input的选中状态,进行相应的加减 13             var oPrice = document.querySelector('.result .price') 14             var tipPrice = +item.querySelector('span').textContent 15             // 小件价格 在input节点 16             // 判断是否被选中 17             if(item.children[0].checked){ 18                 checkNum++ 19                 // 获取数量 20                 count.textContent = `已选购${checkNum}件商品` 21                 // 提取从1开始的字符串, 套餐价的价格,获取套餐价要实时获取 22                 var newPrice = +oPrice.textContent.slice(1) 23                 // console.log(tipPrice) 24                 oPrice.textContent = '¥' + (newPrice + tipPrice) 25  26             }else{ 27                 checkNum-- 28                 // 获取数量, 29                 count.textContent = `已选购${checkNum}件商品` 30                 // 提取从1开始的字符串, 套餐价的价格 31                 var newPrice = +oPrice.textContent.slice(1) 32                 oPrice.textContent = '¥'+ (newPrice - tipPrice) 33             } 34         } 35     }) 36 }

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

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

 1 setMenu()  2 // 套餐价  3 function setMenu() {  4     var suits = document.querySelectorAll('.suits .suitsItem label input')  5     // 获取商品计件元素  6     var count = document.querySelector('.result .num')  7     // 初始化数量  8     var checkNum = 0  9     suits.forEach(function (item, index) { 10         // 每个label绑定点击事件 11         item.onclick = function () { 12             // 他会获取文本节点 13             // console.log(item.nextSibling) 14             // 点击选择按钮时,获取套餐价里面的价格,同时需要判断input的选中状态,进行相应的加减 15             var oPrice = document.querySelector('.result .price') 16             // 小件价格 在input节点 17             var tipPrice = +item.nextElementSibling.textContent 18             // 判断是否被选中 19             if(item.checked){ 20                 checkNum++ 21                 // 获取数量 22                 count.textContent = `已选购${checkNum}件商品` 23                 // 提取从1开始的字符串, 套餐价的价格,获取套餐价要实时获取 24                 var newPrice = +oPrice.textContent.slice(1) 25                 // console.log(tipPrice) 26                 oPrice.textContent = '¥' + (newPrice + tipPrice) 27  28             }else{ 29                 checkNum-- 30                 // 获取数量, 31                 count.textContent = `已选购${checkNum}件商品` 32                 // 提取从1开始的字符串, 套餐价的价格 33                 var newPrice = +oPrice.textContent.slice(1) 34                 oPrice.textContent = '¥'+ (newPrice - tipPrice) 35             } 36         } 37     }) 38 }

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » label绑定事件触发两次的问题
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏