为何点击select的option元素时click事件未触发？

这是浏览器对原生表单控件的特殊处理导致的，具体原因如下：

• 原生控件的交互逻辑限制：<select>和<option>属于浏览器内置的表单控件，它们的下拉选择逻辑由浏览器内核直接实现，并非普通DOM元素的点击交互。当你点击下拉选项时，浏览器不会把click事件派发给<option>元素，而是直接处理选中动作，并触发<select>的change事件。

• 事件被浏览器拦截：即使尝试给<option>单独绑定click事件，多数主流浏览器也不会响应。因为浏览器对这类原生下拉控件做了事件拦截，点击选项的动作被内部消化，不会向外冒泡到<option>或上层DOM节点（比如你绑定在document上的click监听）。

• 正确的监听方式：如果需要捕获选项选中的行为，应该监听<select>的change事件，示例代码如下：

document.getElementById('cars').addEventListener('change', (event) => {
  console.log('选中值:', event.target.value);
  console.log('选中的option元素:', event.target.selectedOptions[0]);
});

注：只有当<select>设置了size属性（变成列表展示模式）时，部分浏览器才会让<option>响应click事件，但这属于特殊场景，标准下拉模式下不适用。

内容的提问来源于stack exchange，提问作者Ravi Teja Vattem