使用WeUI+JS 的label包含input触发两次的问题
在给原生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; });