移动端addEventListener的click/touchstart事件无法触发问题咨询

以下是针对你代码问题的具体分析和解决方案：

核心问题分析 #

你的代码在桌面模拟、平板正常，但手机端失效，大概率是DOM查询逻辑、事件绑定时机或移动端浏览器特性导致的。

1. 动态DOM查询的不可靠性 #

getElementsByClassName返回的是动态集合，每次调用都会重新扫描DOM。你在事件回调里反复查询第一个.DotNavigation490254019__extendedRadioButton元素，一旦DOM结构变化（比如组件更新类名或元素顺序），就会导致获取的元素不是当前点击的那个，甚至为空。

2. 可点击元素的移动端兼容性 #

移动端浏览器默认不会对非原生可点击元素（如div、span）触发点击事件，除非满足以下条件：

• 元素设置了cursor: pointer样式
• 元素没有被上层透明元素覆盖
• 没有其他脚本阻止了事件冒泡/默认行为

3. setTimeout延迟的不确定性 #

100ms的延迟无法保证DOM状态已经更新，如果组件内部是异步修改dataset.checked，这个延迟可能在部分手机上时序不对，导致判断逻辑失效。

修复方案 #

方案一：优化事件回调逻辑，直接使用当前点击元素 #

把回调里的DOM查询改成用this获取当前点击的元素，避免依赖动态集合：

for (const item of document.getElementsByClassName('DotNavigation490254019__extendedRadioButton')) {
    item.addEventListener('click', function () {
        // 直接用当前点击的元素判断状态
        const isChecked = this.dataset.checked === 'true';
        console.log(isChecked);
        document.querySelector('#insert').style.display = isChecked ? 'block' : 'none';
    })
}

方案二：添加可点击元素的CSS兼容样式 #

给目标元素添加以下CSS，确保移动端浏览器识别为可点击：

.DotNavigation490254019__extendedRadioButton {
    cursor: pointer;
    user-select: none; /* 防止点击时选中文字干扰 */
    -webkit-tap-highlight-color: transparent; /* 移除iOS点击高亮 */
}

方案三：改用事件委托（解决动态元素绑定失效） #

如果目标元素是页面加载后动态生成的，循环绑定事件会失效，此时用事件委托绑定到父元素或document上：

document.addEventListener('click', function(e) {
    const target = e.target;
    if (target.classList.contains('DotNavigation490254019__extendedRadioButton')) {
        const isChecked = target.dataset.checked === 'true';
        document.querySelector('#insert').style.display = isChecked ? 'block' : 'none';
    }
})

方案四：同时绑定click和touchstart（兼容极端场景） #

如果还是存在事件不触发的情况，可以同时绑定两个事件，避免单一事件的兼容性问题：

function handleDotClick(e) {
    // 阻止重复触发（touchstart后可能还会触发click）
    e.preventDefault();
    const target = e.currentTarget;
    const isChecked = target.dataset.checked === 'true';
    document.querySelector('#insert').style.display = isChecked ? 'block' : 'none';
}

for (const item of document.getElementsByClassName('DotNavigation490254019__extendedRadioButton')) {
    item.addEventListener('click', handleDotClick);
    item.addEventListener('touchstart', handleDotClick);
}

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