input标签点击事件无效

最近在写一个表单提交时遇到了一个很神奇的bug,input标签的点击事件不响应了,这是为什么?onclick事件这么常用,怎么就失效了呢?

这是我的表单页面

表单页面

可是怎么都点击不了选择咨询类别,真是令我百思不得其解

HTML
JS

检查了半天代码,似乎也并没有什么错误

好吧,看来只能百度,百度不行继续Google,最终在stackoverflow上找到了答案,原来是因为 input标签的id和onclick事件调用的方法不能同名,而我都写成了chooseType

input id 和 onclick 调用的方法名相同

那么我们把onclick调用的方法名换一换,看看是不是就可以解决了

onclick调用的方法名改成chooseTypeFun
JS
搞定

为什么会出现这样的状况呢?我个人的推测是因为当用户点击input标签时想输入内容时,已经触发了一个同名的方法来将游览器的焦点集中在input标签上,而此时如果你调用一个和input id相同的方法,游览器便不知道你到底是需要调用哪一个方法而默认调用往input标签输入内容的那个

不过我想最完美的解决办法还是用jQuery为input标签绑定点击事件吧,毕竟在有的情况下,HTML自带的onclick事件是会失效的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,314评论 19 139
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 11,931评论 1 6
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,642评论 1 41
  • 《我等你》 第七章——儿童心智发展的内在过程 第八章——感觉训练-儿童智力发展的唯一途径 在阅读这一天的章节的时候...
    在鸣阅读 1,885评论 0 0
  • 薄秋未央的夜风 虽不具穿透力 却全然透着丝丝凉意 车灯交错 定格在窗棂做框的视野里 破旧的CD 竟趁着夜色...
    水时光阅读 1,599评论 0 0