使用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; });
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律