应监听 focus 事件而非 click 事件来可靠捕获日期输入框的点击行为，因为原生 date 输入框在 chrome/firefox 中点击日历图标或空白处不触发 click，但 focus 在用户点击、tab 进入或 js 聚焦时均稳定触发。
用 focus 事件监听日期输入框的点击行为
HTML 的 <input type="date"> 在多数浏览器中点击后会弹出原生日期选择器，但它**不会触发 click 事件**（尤其在 Chrome/Firefox 中，点击日历图标或输入框空白处常静默），所以不能靠 onclick 判断“是否被点击”。真正可靠的方式是监听 focus —— 用户点进去、按 Tab 进入、或用 JS 调用 .focus() 都会触发它，且与日期控件交互逻辑一致。
注意：不要混淆 focus 和 focusin；前者不冒泡，后者冒泡但没必要——直接给 input 绑定 focus 更精准、兼容性更好（IE9+ 支持）。
示例：
<input type="date" id="myDate"><script>
document.getElementById('myDate').addEventListener('focus', () => {
console.log('用户已点击/聚焦到日期输入框');
});
</script>
为什么 click 在 type="date" 上经常失效
这不是 bug，而是浏览器实现差异导致的行为不一致：
- Chrome：点击日历图标不触发
click，点击输入框文字区域才可能触发（但不可靠） - Firefox：点击空白输入区有时触发，点击图标几乎不触发
- Safari：部分版本对
click响应更积极，但依然不稳定 - 所有浏览器都保证
focus在用户主动交互（点击、Tab、JS 聚焦）时稳定触发
如果你在调试时发现 console.log 没输出，先检查是否绑在了父容器上（click 冒泡能捕获，但语义错误）；再确认元素是否被 disabled 或 pointer-events: none 阻断。
需要区分“点击打开”和“点击关闭”？用 blur 配合状态标记
原生日期控件没有“弹出中”状态 API，所以无法直接判断用户是刚点开还是刚点掉。可行方案是用布尔变量记录焦点状态：
示例逻辑：
let isDateOpen = false;
const dateInput = document.getElementById('myDate');
dateInput.addEventListener('focus', () => {
isDateOpen = true;
console.log('日期选择器已打开（或即将打开）');
});
dateInput.addEventListener('blur', () => {
// 注意：blur 在用户点其他地方、按 Tab 离开、甚至点日期面板里的按钮后都会触发
isDateOpen = false;
console.log('用户已离开日期输入框');
});
关键点：
-
blur不代表“面板已关闭”，只是输入框失焦；用户可能点了面板里的年份再点空白处，这时blur仍会触发 - 不要依赖
document.activeElement实时查，因为日期面板属于 shadow DOM 或系统级 UI，不在页面 DOM 树中 - 如果业务强依赖“面板是否可见”，需换用第三方日期组件（如 flatpickr、Pikaday），它们提供
onOpen/onClose回调
移动端要注意：软键盘 + 日期面板共存时 focus 仍有效，但时机微妙
在 iOS Safari 或 Android Chrome 中，点击 type="date" 通常直接唤起系统日期选择器，不弹软键盘；但若用户手动输入（比如删掉值后打字），则可能触发软键盘。此时 focus 依然可靠，但要注意：
- 用户从软键盘切回日期面板时，不会再次触发
focus（焦点没变） - 某些安卓 WebView（如微信内置）会把日期选择器当作独立上下文，
blur可能延迟几百毫秒才触发 - 建议加个
setTimeout延迟检查document.activeElement，仅用于兜底，别作为主逻辑
真实项目里，只要用 focus + blur 组合，覆盖 95% 场景就够了。剩下那 5%，往往是用户连点两次日历图标、或快速切换输入框——这时候与其纠结“是否被点击”，不如关注“值是否变化”或“表单是否提交”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
