jQuery Draggable容器内Input无法输入/响应按键事件求助

我之前也碰到过一模一样的糟心事——给父元素加上jQuery Draggable之后，里面的input文本框彻底没法输入，按键事件连个水花都没有。当时试了stopPropagation()完全不管用，后来才揪出根源，下面分享我的调试思路和最终解决办法：

一、逐步排查问题的调试步骤 #

如果你还没定位到问题，可以按这些步骤一步步来：

• 先验证input本身的可用性：把input单独拎出来，脱离那个可拖拽的父元素，测试它能不能正常输入、触发keydown事件。如果正常，那问题百分百出在父元素的拖拽逻辑上。
• 检查事件拦截情况：打开Chrome开发者工具的「Event Listeners」面板，查看父元素和input上绑定的所有事件，尤其是鼠标、键盘相关的，看看有没有被拖拽插件拦截的迹象。
• 测试拖拽插件的影响：临时注释掉父元素的draggable()初始化代码，再测试input是否恢复正常。如果恢复，就确定是拖拽插件搞的鬼了。
• 打印事件传播路径：在input的keydown事件里加一行console.log(evt.composedPath())，看看事件到底有没有走到input这里，还是中途被截胡了。

二、问题根源与最终解决方案 #

就像你后来发现的，问题出在jQuery UI Draggable插件上——它会给父元素绑定全局的鼠标、键盘事件监听，用来处理拖拽逻辑，这直接导致子元素的input没法获取焦点、响应按键。

解决办法就是用Draggable的cancel选项，把不需要触发拖拽的元素排除在外：

$('#input-parent').draggable({ 
  containment: 'window', 
  cancel: '.x-leaf' // 指定input的类名，让拖拽逻辑直接忽略它
});

再结合你之前给input加的stopPropagation()（确保input的点击事件不被父元素的拖拽逻辑干扰），就能彻底解决这个问题了。

补充小说明 #

jQuery Draggable的cancel选项默认值是input,textarea,button,select,option，但有时候自定义类名的input或者动态创建的元素可能没被默认规则覆盖，所以手动指定类名会更稳妥。

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