Firefox火狐浏览器js点击事件不执行,chrome/IE浏览器js点击事件正常执行;

  • 问题现象
  • 查找问题原因
  • 网上查找资料 寻求答案
  • 寻求公司“大佬” 解决有点像 兼容性的问题
  • 官方对disable的解释:
  • 出问题的代码
  • 正确的代码结构
  • 总结


问题现象

Firefox火狐浏览器js点击事件不执行,chrome/IE浏览器js点击事件正常执行;

查找问题原因

  • 由于在firfox中点击事件都不执行,在浏览器中尝试 手动修改id名称;并执行js绑定事件
    $("#test123").unbind().bind("click",function(){ console.log("123123");});执行完上述js之后点击相应的绑定元素并不执行打印 “123123”内容;

网上查找资料 寻求答案

  • 搜索关键词**“火狐浏览器点击事件不执行”**
  1. 结果中大多是说火狐绑定js事件原理和chrome一样 ;
  2. 火狐选择器不一样建议换成id选择器;
  3. 其他一些错误,例如js代码逻辑写错了;

这些都不是原因

寻求公司“大佬” 解决有点像 兼容性的问题

还是老话说的好,姜还是老的辣

大佬来就说了一句,你这个input 上面有个disable 属性;这个东西好像有点变态,官方文档的解释是会禁用元素,和点击事件。

官方对disable的解释:

disabled 属性是一个布尔属性。
disabled 属性规定应该禁用的 元素。
被禁用的 input 元素是无法使用和无法点击的。
disabled 属性进行设置,使用户在满足某些条件时(比如选中复选框,等等)才能使用 元素。然后,可使用 JavaScript 来删除 disabled 值,使该 元素变为可用的状态。
提示:表单中被禁用的 元素不会被提交。
注意:disabled 属性不适用于 。

PS:期间找过前端人员协助查找问题,但是前端给出的意见是某些央视上面的兼容性问题。最后还是根据“大佬”的话。无意之间将 disable 属性去掉了,点击事件在火狐中就生效了。

出问题的代码

html 结构:<input type="button" id="xxx" disable="disable"/>

js 代码$("#ID“).unbind().bind("click",function(){点击事件代码逻辑;});

正确的代码结构

html 结构: 将input设置为只读属性,而不采用disable属性来做一个不允许输入的效果<input type="button" id="xxx" readonly="readonly" />

js 代码$("#ID“).unbind().bind("click",function(){点击事件代码逻辑;});

总结

  • 本功能就是在input 标签的基础上做一个假的输入框的效果,不能让用户输入内容。所以用了一个disable属性将input的禁用达到不能输入的效果。
  • 经此发现对于html 标签基础属性的理解还是存在比较浅显的理解,并没有真正理解其含义。
  • 活到老学到老,才是程序员的生存之道啊。