问题概要:

当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件。
举个例子:

可以看到 你就算赋予了id 和value 前端页面渲染也是不正常的 value无论赋成什么 结果都是on
但是我还需要对他进行一些操作需要绑定他的onclick事件 所以我得解决办法就是在radio标签外套了一层div 绑定了id属性,同时将onclick事件绑定在这层div上。当我们触发它时,通过jQuery的子选择器找到内部radio。但是这样做问题又来了 就是这篇文章的主题 事件冒泡
简单来说,就是因为点击label的时候,会触发套在其内部的的input的click事件,导致事件再次触发
解决办法就是:

 $("label").click(function (e) {
if ($(e.target).is("input"))
return;
});

2018-2-28日更:
其实更应该从思路上解决问题,当发生事件冒泡时,我们是否可以将这两个引起问题的dom节点分开成两个div来进行处理,而不是通过js控制。
参考链接:http://blog.csdn.net/qazwsx33...

前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法的更多相关文章

  1. js 事件冒泡是什么如何用jquery阻止事件冒泡

    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...

  2. 事件冒泡是什么如何用jquery阻止事件冒泡

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  3. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  4. 原声js,取消事件冒泡,点击按钮,显示box,点击屏幕其他地方,box隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. IScroll中div点击事件触发两次解决办法

    1.网上的同学说的,直接修改源代码,但是这种方法可能会影响到现有的程序. 搜索onBeforeScrollStart方法,将其中的preventDefault禁止掉搜索_end方法,将其中模拟clic ...

  6. ssi-uploader上传图片插件,点击选择文件按钮自动提交表单解决办法

    先介绍一下这款插件,然后再谈使用中可能遇到的问题 ssi-uploader是一个JQuery的图片上传插件,界面比较美观 github地址:https://github.com/ssbeefeater ...

  7. 点击button触发onclick事件判空后依旧自动跳转

    这是一个前端的问题. 其中判断字符串为空的脚本代码是这样的: var remark = $("#Remark").val(); //判空.注意:var reg = /空格/g; v ...

  8. 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法

    H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...

  9. 事件冒泡以及onmouseenter 和 onmouseover 的不同

    1. onmouseenter onmouseenter 事件在鼠标指针移动到元素上时触发. 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发. onmouseent ...

随机推荐

  1. EMD——EEMD——CEEMD语音增强算法基础

    首先,HHT中用到的EMD详细介绍:https://wenku.baidu.com/view/3bba7029b4daa58da0114a9a.html 本文具体参考 https://zhuanlan ...

  2. [LC] 285. Inorder Successor in BST

    Given a binary search tree and a node in it, find the in-order successor of that node in the BST. Th ...

  3. LeetCode No.127,128,129

    No.127 LadderLength 单词接龙 题目 给定两个单词(beginWord 和 endWord)和一个字典,找到从 beginWord 到 endWord 的最短转换序列的长度.转换需遵 ...

  4. python 元祖参数和map参数

    1.对于元组形参数, def func(a,b,c): pass 可以采用一个元组的形式调用, params = (1,2,'c') 如果直接传递运行会抛出异常,正确的调用形式为 func(*para ...

  5. 传输层TCP和UDP

    TCP协议        传输控制协议        TCP是面向连接.可靠的进程到进程通信的协议        TCP提供全双工工服务,即数据可在同一时间双向传输        三次握手:      ...

  6. 非IoC方式访问Servlet API的两种方法

    使用ActionContext访问 ActionContext来自com.opensymphony.xwork2.ActionContext 具体实现代码段如下: <span style=&qu ...

  7. YII框架开发一个项目的通用目录结构:

    testdrive/    index.    assets/    css/    images/    themes/           yiic.       commands/        ...

  8. C#阶段小结

    一.数据类型: (一)内建类型: 整型(int ,short, long ,byte ,uint ,ushort, ulong ,sbyte): 浮点型(double float decimal): ...

  9. 零基础学习Web前端开发

    目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 什么是前端开发? 前端开发是创建Web页面或App等将界面呈现给用户的过程.通过使用 HTML,CSS,JavaScript,以及它们衍 ...

  10. DSU On Tree——Codeforces 600E(E. Lomsat gelral)

    有这么一类问题,要求统计一棵树上与子树相关的某些信息,比如:在一棵所有节点被染色的树上,统计每棵子树上出现次数最多的颜色编号之和. 很自然的可以想到用DFS序+主席树去求解,但是编码复杂度很高: 然后 ...