使用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;});

转载于:https://www.cnblogs.com/sky-gfan/p/8472021.html

使用WeUI+JS 的label包含input触发两次的问题相关推荐

ios下点击label包含的input checkbox或radio无效问题
问题描述: 页面中有多个根据接口返回数据,动态生成的checkbox和radio选项,input元素外有一个label标签包裹着,label标签内有文字,即如下示例所示: <label>& ...
elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 最近在使用 vue2.0开 ...
weui.js中的picker自定义实现移动端联动
实现weui中的picker联动,效果图如下: 代码如下 <html lang="en"><head><meta charset="UTF- ...
JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金)
第一: 限制只能是整数 [js] view plain copy <input type = "text" name= "number" id = 'nu ...
html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
jq动态获取input的值传给html,jquery 保证html()拿到的html字符串包含input的value值
发现html()返回的值,并不包含input的value的值, value得到的是空字符串. 原因,DOM在这html渲染的时候value这个attribute仅仅是代表input的初始值. 后面,如 ...
weui.js slider的使用笔记
1.写在前面的废话最近接触在开发企业微信应用的时候,接触到了weui.用到了其中的slider功能.不知道是不是我用法有误,发现slider存在一定的兼容问题---在pc端和移动端不能很好的兼容.所 ...
纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
html怎样使用ui套件,weui框架组件小白入门指南：如何安装使用weui.js?
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 苏南大叔在本文中说说腾讯的weui这个前端框架的基本使用方法.这款框架已经问世有几年的时间了,因为其可以把微信 ...

使用WeUI+JS 的label包含input触发两次的问题

使用WeUI+JS 的label包含input触发两次的问题相关推荐

最新文章

热门文章