tui.DatePicker选日期时误触后方按钮的问题及优化方案咨询

选择日期并关闭日期选择器后，后方的按钮会被意外触发。

当前初始化DatePicker的代码：

const prevDate = new tui.DatePicker('#prevDate', {
    language: 'ko',
    type: 'date',
    usageStatistics: false,
    input: {
        element: '#prevDate-input',
        format: 'yyyy-MM-dd'
    }
});

const nextDate = new tui.DatePicker('#nextDate', {
    language: 'ko',
    type: 'date',
    usageStatistics: false,
    input: {
        element: '#nextDate-input',
        format: 'yyyy-MM-dd'
    }
});

你当前通过监听tui-calendar元素的touchstart事件阻止冒泡和默认行为解决了问题，这里提供几个更优的方案参考：

1. 利用组件原生事件拦截 #

TUI DatePicker自带close事件，直接在弹窗关闭时阻止后续事件传递，无需全局监听DOM：

// 给两个DatePicker实例绑定close事件
[prevDate, nextDate].forEach(picker => {
    picker.on('close', () => {
        // 针对触摸设备，临时阻止一次touchend事件穿透
        const blockTouch = (e) => {
            e.stopPropagation();
            e.preventDefault();
            document.removeEventListener('touchend', blockTouch);
        };
        document.addEventListener('touchend', blockTouch, { once: true });
    });
});

这种方式更贴合组件设计逻辑，不会污染全局DOM事件。

2. CSS层面阻止触摸事件穿透 #

如果问题仅发生在移动端，可以通过CSS直接禁用日期选择器容器的触摸行为传递：

.tui-datepicker-container {
    touch-action: none;
}

这个方案最简洁，不需要编写额外JS代码，直接从样式层面解决触摸穿透问题。

3. 在按钮端做触发过滤 #

给目标按钮的点击事件添加判断，排除来自日期选择器的点击：

const targetBtn = document.querySelector('.your-button-selector');
targetBtn.addEventListener('click', (e) => {
    // 如果点击事件的触发源来自日期选择器容器，直接返回
    if (e.target.closest('.tui-datepicker-container')) {
        return;
    }
    // 执行按钮原本的业务逻辑
});

这种方式从事件接收端做拦截，逻辑清晰，不会影响日期选择器的正常交互。

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