无法点击文本框：表单点击时自动发起GET请求导致无法输入

嘿，这个问题确实有点少见，不过咱们可以从几个常见的方向入手排查，大概率是事件绑定或者DOM结构的问题：

可能的原因及排查步骤 #

• DOM结构错误：文本框被可跳转元素包裹
  先检查_new.html.erb里的表单结构，看看你的文本框是不是不小心嵌套在了<a href="/categories/new">标签里面？如果是这样，点击文本框的时候会触发a标签的默认跳转行为，发起GET请求到categories#new。
  另外也留意下表单有没有错误设置method="get"或者action="/categories/new"，不过这种情况一般是提交表单才会触发，除非有额外的事件绑定。

• 错误的事件绑定导致误触发请求
  打开浏览器开发者工具（F12），切换到「Network」标签，然后点击文本框触发那个GET请求。在请求列表里找到对应请求，查看「Initiator」列，就能看到是哪个JS文件或者DOM元素触发了这个请求，精准定位问题源头。
  重点检查categories.js里的事件绑定代码：有没有给文本框（或者它的父元素）绑定了click事件，里面写了window.location.href = '/categories/new'或者$.get('/categories/new')这类代码？也有可能是事件委托范围太大，比如$('body').on('click', '.form-area', function() { ... })，点击文本框时事件冒泡到父元素，触发了请求逻辑。

• 动态加载的JS代码执行了不必要的请求
  看看new.js.erb的内容，是不是在渲染完表单后，不小心执行了发起GET请求的代码？比如里面写了$.get('/categories/new')，或者调用了某个会触发请求的函数，导致表单加载完成后又发起了一次请求，覆盖掉当前的表单状态。

快速验证小技巧 #

如果怀疑是事件冒泡导致的，可以先在文本框的点击事件里加一行代码阻止冒泡：

$('#your-textbox-id').on('click', function(event) {
  event.stopPropagation();
});

如果加了之后不再触发GET请求，那就是父元素的事件绑定有问题，去排查父元素的click事件逻辑就行。

内容的提问来源于stack exchange，提问作者Chris