前端的事件冒泡（例如点击一次onclick事件执行两次）解决办法

cnsworder 发布于2019-08-01 18:01 / 1815人阅读

摘要：举个例子可以看到你就算赋予了和前端页面渲染也是不正常的无论赋成什么结果都是但是我还需要对他进行一些操作需要绑定他的事件所以我得解决办法就是在标签外套了一层绑定了属性，同时将事件绑定在这层上。

问题概要：

当我运用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...

专线服务私有云点击事件执行php js点击事件重复执行冒泡事件事件冒泡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51527.html

前端小知识--JavaScript事件流

摘要：事件事件指可以被侦测到的行为。事件通常与函数配合使用，当事件发生时函数才会执行。两家公司对于事件流出现了截然相反的定义。级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段事件冒泡阶段。我们又把事件处理程序称为事件侦听器。 JavaScript事件流 0.DOM级别与DOM事件首先在介绍DOM事件之前我们先来认识下DOM的不同级别。针对不同级别的DOM，我们的DOM事件处理方式也是...

Taste 2019-08-26 11:43 评论0 收藏0
FastClick 源码解读

摘要：所有浏览器浏览器不支持安卓中中有属性安卓中中有属性有属性的有属性的所以在不需要的浏览器会直接掉，不会执行下面的所有代码。见源码行，可以看出在响应无操作后，则触发。其实一直就想花些时间读一读那些优秀的开源库，今天终于下了决定打算死磕下自己，2016年每个月读2-3个优秀的开源库，把源码精彩的地方和自己心得分享给大家。目录（一）背景（二）源码解析（三）Zepto 点击穿透与 Fast...

Chaz 2019-08-19 17:24 评论0 收藏0
js高级程序设计-事件处理-阅读笔记

摘要：事件流事件流是指从页面接受事件的顺序一般考虑兼容性问题会使用冒泡而不适用捕获事件冒泡事件开始时由具体的元素嵌套层次最深的元素接受然后逐级向上传播到文档事件捕获基本跟事件冒泡相反事件捕获用于在于事件到达预定目标之前捕获他首先接收到事件然后事件事件流事件流是指从页面接受事件的顺序showImg(https://segmentfault.com/img/bVIf9T?w=540&h=48...

Anshiii 2019-08-20 13:46 评论0 收藏0
理解Javascript中的事件绑定与事件委托

摘要：最近在深入实践中，遇到了一些问题，比如我需要为动态创建的元素绑定事件，那么普通的事件绑定就不行了，于是通过上网查资料了解到事件委托，因此想总结一下中的事件绑定与事件委托。事件冒泡认为事件促发的最深层元素首先接收事件。最近在深入实践js中，遇到了一些问题，比如我需要为动态创建的DOM元素绑定事件，那么普通的事件绑定就不行了，于是通过上网查资料了解到事件委托，因此想总结一下js中的事件绑...

lewinlee 2019-08-20 10:23 评论0 收藏0
JS基础篇--事件绑定及深入

摘要：学习要点传统事件绑定的问题事件处理函数事件处理函数事件对象的其他补充事件绑定分为两种一种是传统事件绑定内联模型，脚本模型，一种是现代事件绑定级模型。现代事件绑定在传统绑定上提供了更强大更方便的功能。事件和事件事件和事件，有关加载方面的事件。学习要点： 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充事件绑定分为两种：一种是传统事件绑定（内联模型...

yearsj 2019-08-19 17:47 评论0 收藏0