问题概要:

当我运用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. iOS雪花动画、音频图、新闻界面框架、2048游戏、二维码条形码扫码生成等源码

    iOS精选源码 粒子雪花与烟花的动画 iOS 2048游戏 JHSoundWaveView - 简单地声波图.音波图 一个可快速集成的新闻详情界面框架,类似今日头条,腾讯新闻 二维码/条形码扫描及扫描 ...

  2. svn http

    yum install -y httpd subversion mod_dav_svn mkdir -p /var/lib/svn cd /var/lib/svn svnadmin create de ...

  3. day34-进程

    #进程是程序的运行,程序不运行不产生进程. #1.进程的并行与并发: # 并行:是指两者同时执行,比如赛跑,两人都在不停的往前跑.(资源够用,比如三个线程,四核的cpu) # 并发:是指资源有限的情况 ...

  4. n的m划分

    n的m划分: dp[i][j]表示j的i划分,也就是将j颗球放入i个袋子里面,最后的答案是dp[m][n] 状态转移方程为dp[i][j]=dp[i-1][j]+dp[i][j-i]; 划分方法有两种 ...

  5. webpack4的迁移

    引用于https://www.jianshu.com/p/7ae252f27f09 感觉是突然之间,webpack4的消息就满天飞了,听说打包速度提高了很多,还有最大的噱头是实现了零配置,leader ...

  6. Leetcode9_回文数

    哈哈哈哈哈哈哈太开心了,今天的代码耗时和内存消耗比官方少了一半哈哈 (因为官方用C#写的,我用C++,手动狗头) 题目 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样 ...

  7. curl操作和file_get_contents() 比较

    1 . curl需要php开启php_curl开启扩展 $ch = curl_init(); $timeout = 5; curl_setopt ($ch, CURLOPT_URL, 'http:// ...

  8. tomcat部署项目方式

    三大部署方式1.   Context描述文件部署通过独立的Context文件描述清楚项目的访问路径和地址,tomcat在启动的时候会解析这个Context文件,创建一个Context对象. Conte ...

  9. 公式化学习urllib(第一卷)

    Import urllib.request 正常爬取网页: url=网址 +代表 下面测试一下: 结果我就不显示了 令html为读取后的对象 先用正则表达式抓取数据 Import re 令rule是抓 ...

  10. 用ES6和fetch封装网络请求

    导读: fetch: 这个方法是ES2017中新增的特性,这个特性出来后给人一种传统ajax已死的感觉,其实它的作用是替代浏览器原生的XMLHttpRequest异步请求,我们在日常的开发中,基本不会 ...