HTML Date输入框点击计数问题：日期选择器内点击未被统计

问题原因 #

原生<input type="date">弹出的日期选择器是浏览器提供的系统级控件，不属于当前页面的DOM结构，因此绑定在父容器div上的点击事件无法捕获到选择器内部的点击操作。

纯JavaScript解决方案 #

由于无法直接监听原生选择器的DOM事件，我们可以通过跟踪选择器的打开状态+全局点击事件捕获的间接方式来统计点击次数：

实现思路 #

1. 监听date输入框的focus和blur事件，标记选择器是否处于打开状态（添加延迟处理是为了规避点击选择器时短暂失焦的问题）。
2. 在document的捕获阶段监听点击事件，当选择器处于打开状态时，将点击计入统计。

完整代码示例 #

<div class="inputTile" id="leftInputTile">
     <label for="start">Input Today's Date:</label>
     <input type="date" id="start" name="trip-start" value="2018-07-22" min="1900-01-01" max="2023-12-31"><br><br>
</div>

let leftInputTile = document.getElementById("leftInputTile");
let leftInputClickCount = 0;
const dateInput = document.getElementById("start");
let isDatePickerOpen = false;

// 标记日期选择器打开状态
dateInput.addEventListener('focus', () => {
  isDatePickerOpen = true;
});

// 标记日期选择器关闭状态（延迟处理避免误判）
dateInput.addEventListener('blur', () => {
  setTimeout(() => {
    isDatePickerOpen = false;
  }, 100);
});

function countClicksInLeft() {
  leftInputClickCount++;
  console.log("left click " + leftInputClickCount);
}

// 统计容器内的常规点击
leftInputTile.addEventListener('click', countClicksInLeft);

// 统计日期选择器内的点击
document.addEventListener('click', (e) => {
  if (isDatePickerOpen) {
    countClicksInLeft();
  }
}, true); // 使用事件捕获阶段确保优先触发

注意事项 #

• 不同浏览器的原生日期选择器行为存在差异，部分场景下可能出现少量统计偏差，但该方案能覆盖绝大多数现代浏览器的使用场景。
• 延迟时间可根据实际测试调整，确保不会因为浏览器的焦点切换逻辑导致误统计。

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