iPadOS 15 Safari下touchend事件异常及长按弹窗禁用问题咨询

问题1：touchend与click同时绑定时弹窗闪烁 #

原因 #

iPadOS 15 调整了事件触发逻辑，touchend 事件中调用 e.preventDefault() 不再能默认阻止后续300ms左右的click事件触发，导致toggleClass连续执行两次，弹窗出现后立即被关闭。

修复代码 #

// 通过触摸标记避免重复触发
$('.popup').on('touchend click', function(e) {
    e.preventDefault();
    // 若为click事件且已经由touchend触发过逻辑，则直接跳过
    if (e.type === 'click' && $(this).data('isTouchTriggered')) {
        $(this).data('isTouchTriggered', false);
        return;
    }
    // 触摸事件触发时添加标记
    if (e.type === 'touchend') {
        $(this).data('isTouchTriggered', true);
    }
    $('#popup-content').toggleClass('d-flex d-none');
});

问题2：长按按钮弹出空白呼出线 #

原因 #

iPadOS 15 新增了触控元素的长按呼出发条/上下文菜单逻辑，原有user-select、-webkit-touch-callout配置不再覆盖该场景的规则。

修复方案 #

1. 补充CSS配置：

.popup {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* 新增适配iPadOS 15的属性 */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    touch-action: manipulation;
}

2. 若CSS配置仍不生效，补充JS事件监听阻止长按默认行为：

$('.popup').on('contextmenu', function(e) {
    e.preventDefault();
})

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