使用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 @ 2018-02-26 10:50  竹殇  阅读(379)  评论(0编辑  收藏  举报