我在ASP.NET Zero和ASP.NET Boilerplate项目里碰到了一个挺奇怪的问题——点击复选框的时候，页面上的日期输入框会自动弹出日历控件，而且之前选中过的日期控件还会再次显示弹窗。想请大家帮忙分析下可能的原因线索。

相关代码 #

@Html.TextBoxFor(m => m.Date1, "{0:yyyy-MM-dd}", new { type = "date", @class = "form-control", id = "Date1"})
@Html.TextBoxFor(m => m.Date2, "{0:yyyy-MM-dd}", new { type = "date", @class = "form-control", id = "Date2" })
@Html.CheckBoxFor(m => m.ISChecked, new { @class = "icheck", id = "Checkbox1" })

场景说明 #

因为声望值不足没法直接嵌入图片，我大概描述下界面和异常效果：

• 表单布局：页面上有两个日期输入框（Date1、Date2）和一个标记了icheck类的复选框，是常规的表单排列
• 异常表现：点击这个复选框时，其中一个日期控件的日历弹窗会自动弹出来，甚至之前操作过的日期控件的弹窗也会重复显示

可能的原因线索 #

• icheck插件的事件冲突：你给复选框加了icheck类，ASP.NET Zero/ABP集成的icheck插件会替换原生复选框的DOM结构，它的点击事件处理可能存在事件冒泡，触发了父容器或邻近日期输入框的focus事件——原生type="date"输入框只要获得焦点就会唤起日历弹窗
• 日期控件的焦点误触发：页面中可能存在全局脚本（比如ABP自带的表单增强逻辑、自定义脚本），在监听复选框状态变化时，不小心让日期输入框获取了焦点，从而触发日历弹窗
• DOM交互的意外关联：icheck生成的模拟复选框元素，可能和日期输入框在DOM层级上有意外关联，导致点击事件被误传递；或者CSS的层级问题，让之前的日历弹窗没正确隐藏，再次点击复选框时又被触发
• ABP表单脚本的干扰：ASP.NET Zero/ABP自带的表单验证、控件初始化脚本，可能在处理复选框状态变更时，错误地触发了日期控件的交互逻辑

排查建议 #

• 先临时移除复选框的icheck类，用原生复选框测试，如果问题消失，基本可以确定是icheck插件和日期控件的冲突
• 打开浏览器开发者工具的「Event Listeners」面板，查看复选框（包括icheck生成的模拟元素）绑定的点击事件，追踪是否有触发日期输入框focus的逻辑
• 在日期输入框的focus事件上打断点，点击复选框时查看调用栈，找到触发焦点的根源
• 检查项目中的自定义全局脚本，看是否有监听document.click这类事件，在处理时误操作了日期输入框

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