在給原生JS中的包含input標簽的Label標簽綁定點擊的事件會觸發兩次。

因為使用WeUI樣式庫，所以不能拋棄label標簽，使用event.stopPropagation()似乎沒有效果，使用return false 亦沒有效果。

1.擴展綁定事件

jQuery.WY = {bindMobileClick: function (selector, fn) {var touch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;var fName = touch ? "tap" : "click";$(selector).on(fName, function (event) {fn(this);event.preventDefault();event.stopPropagation();});} }

2.WeUI 樣式表單

<label class="weui-cell weui-check__label" for="rdCpfzt_20"><div class="weui-cell__bd"><p>微膨脹</p></div><div class="weui-cell__ft"><input type="checkbox" class="weui-check" name="rdCpfzt6" value="20" data-type="6" data-name="微膨脹" id="rdCpfzt_20" ><span class="weui-icon-checked"></span></div> </label>

3.綁定事件，使用時間戳限制

var evTimeStamp = 0;$.WY.bindMobileClick(".weui-check__label", function (sender) {var now = new Date();if (now - evTimeStamp < 100) {return;}var radio = $(sender).find(":radio");radio.prop("checked", function (i, val) {return !val;});var checkbox = $(sender).find(":checkbox");checkbox.prop("checked", function (i, val) {return !val;});evTimeStamp = now;});

?

轉載于:https://www.cnblogs.com/sky-gfan/p/8472021.html

總結

以上是生活随笔為你收集整理的使用WeUI+JS 的label包含input触发两次的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。