踩坑记录：关于低版本firefox43.0.1在控件中定义onclick=remove()，点击按钮，按钮会消失。

第一次发博客，很紧张，也是今天遇到了一个问题，突然想在这里记录一下。

言归正传，如题，今天测试人员给了一个别人的bug过来，这个bug的描述是这样的：

1.在一个页面里点击删除按钮，删除按钮消失，报错，当前使用的是43.0.1版本的火狐浏览器，而在IE、chrome、sougou、高版本的firefox（这里高版本的指的是53.0和61.0）测试是不会出现这样的问题。

看到这个问题，很多人第一反应是兼容性问题，没错，是兼容性问题。然而遇到这种疑难杂症，还是想要去了解，其中真正导致的缘由，第一步要做的是分析。

首先，页面的其他按钮是没有出现这样的问题，那必然是当前的这个删除按钮写了某些特殊逻辑导致的，点开代码，发现那位开发人员写的一个代码大概是下面这样的。

<!--真实代码就不贴出来了，因为采用了公司的UI框架这里不好说明，但本质是这样--><button οnclick="remove()" class="...">删除</button>

而在对应的js里，写的是如下

function remove(){//...
}

可以看出，问题应该就是出在这个οnclick="remove()"的写法上，首先使用这种敏感的关键字方法作为自定义的方法名其实是一种很危险的行为。

那问题是出现在哪里呢？是在触发了事件的方法里吗，于是注释掉了function remove里的所有方法，使用firefox43.0.1测试，问题依然存在，按钮还是消失了。

排除法，js方法逻辑没有问题，问题出在html或者jsp上。

会不会是class的问题，删除掉了样式，依然如此，所以还是onclick出的问题，大胆猜测，是否是remove名字问题，改了方法名字运行，一切正常了，没有错就是这个名字的问题。

思考一下，其实在onclick的后执行的是remove()方法，而remove()这个方法对原生Js或者是Jquery选择出来的对象来讲，是用来移除元素的一个方法。（下面引用jquery文档的说法）

定义和用法

remove() 方法移除被选元素，包括所有文本和子节点。

该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

43.0.1版本的火狐在解析代码的时候，把onclick里的方法直接优先识别成了remove()元素的方法，而非我们自定义的remove()的方法，因此js里写的function直接就被无视了，造成了只执行了，删除按钮的操作，后续按钮事件里的操作完全没有执行到。

火狐后来的版本应该也可能意识到了这个问题，所以过滤掉了类似remove()的这种关键字方法，直接查找的是我们js定义的方法，很容易测试出来。编写一个button, onclick属性依然写的是remove()方法，但不在js中定义remove方法，用高版本（61.0）的火狐点击按钮，F12检查，发现报错了，报的是找不到remove这个方法，也证明了我的推测。

然而无法拿到火狐的源码，也就无法知道具体火狐如何改进了这个事件监听。

浏览器兼容问题确实困扰着很多开发人员，我只是将我遇到的坑写出来，为了防止其他人也遇到这种麻烦问题，因为之前无论是baidu或者google都没有搜索到遇到同样问题的人来解答。

在这里要说的是为了避免不必要的麻烦，方法名的定义还是要尽量避开关键字啊，还有浏览器还是新版本的好。

踩坑记录：关于低版本firefox43.0.1在控件中定义onclick=remove()，点击按钮，按钮会消失。相关推荐

新手可直接复现：Duan版本CenterNet在2080Ti上训练自己的数据集——踩坑记录
实验室换了GPU,记录下centernet在新电脑上的配置过程,如果对下面很多不理解先阅读我以前的这篇博客即可初学者复现CornerNet:详细指导零基础在Ubuntu系统运行该代码并完全理解论文思路 ...
TVM: Deep Learning模型的优化编译器(强烈推荐, 附踩坑记录)
本文作者是阿莱克西斯,原载于知乎,雷锋网(公众号:雷锋网)获得授权转载. (前排提醒,本文的人文内容部分稍稍带有艺术加工,请保持一定的幽默感进行阅读) 关注我最近想法的同学应该知道我最近都在把玩 TV ...
几乎完美安装！ NVIDIA Jetson Nano B01 Ubuntu 18.04.3 LTS 的 ROS 安装和菜鸟的踩坑记录【会继续完善】
几乎完美安装! NVIDIA Jetson Nano B01 Ubuntu 18.04.3 LTS 的 ROS 安装和菜鸟的踩坑记录 NVIDIA Jetson Nano B01技术规格 Ubuntu ...
Angular教程英雄之旅版本踩坑记录
Angular教程英雄之旅版本踩坑记录前言问题1 问题2 问题3 问题4 总结前言这两天心血来潮,跟着Angular官网的教程英雄之旅(https://angular.cn/tutorial) ...
Qt5.13.2中配置opencv4.5.0踩坑记录
目录 cmake编译opencv时速度过慢或超时 mingw32-make时报错错误一 [modules\core\CMakeFiles\opencv_core.dir\build.make:1 ...
YOLO V5 CPU版本安装踩坑记录
YOLO V5 CPU版本安装踩坑记录单纯的记录下yolov5进行检测遇到了点问题的解决方法安装过程: 准备: 1,下载YOLOv5 github项目:https://github.com/ult ...
linux命令行下载cuda,linux 命令行下安装特定版本的 cuda (踩坑记录)
其实可直接看第 4 步的总结...... 实验室服务器 Ubuntu 16.04 系统下原本安装的 cuda 版本是 9.0,硬件条件是一张 1080 Ti 的 GPU,在使用 PyTorch 的过程 ...
Ubuntu20.0编译LineageOs14刷入小米8Lite(青春版)流程与踩坑记录
本文全是个人经历与踩坑记录,不同机型配置可能不一样全文踩坑内容错误加粗编写时间:2022.5.24-14:53 机型配置: 虚拟机 4核心每核心2线程手机小米8Lite 设备代号:plati ...
【MathType安装】Office2019+MathType7.4.8.0+踩坑记录+最终使用方案
使用Office2019安装MathType7.4.8.0屡屡碰壁,最终使用的解决方案不同于网络上的大多数方法.尽管当前记录的解决方案还不完美.未做到一劳永逸,但能用就行. MathType安装包获取 ...
【问题解决】Android JDK版本不匹配导致崩溃踩坑记录
[问题解决]Android JDK版本不匹配导致崩溃踩坑记录部分机型反馈崩溃问题谷歌回复与解决方案 Android打包脱糖操作对比与排查总结前几天同事遇到一个非常诡异的报错,紧急处理后,趁着 ...

踩坑记录：关于低版本firefox43.0.1在控件中定义onclick=remove()，点击按钮，按钮会消失。

定义和用法

踩坑记录：关于低版本firefox43.0.1在控件中定义onclick=remove()，点击按钮，按钮会消失。相关推荐

最新文章

热门文章