第一次发博客,很紧张,也是今天遇到了一个问题,突然想在这里记录一下。
言归正传,如题,今天测试人员给了一个别人的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都没有搜索到遇到同样问题的人来解答。
在这里要说的是为了避免不必要的麻烦,方法名的定义还是要尽量避开关键字啊,还有浏览器还是新版本的好。