使用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;
            });
复制代码

 

posted @   竹殇  阅读(381)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示