移动端通过Deeplink跳转App时Click事件未触发问题

问题根源 #

移动端浏览器处理DeepLink的逻辑是：当用户点击带有deeplink://协议的链接时，浏览器会立即尝试唤起对应App，若成功则直接切换到App进程，当前页面的JS事件（如click）会被中断，无法完成执行；只有唤起失败时，浏览器才会继续执行页面的后续JS代码。

可行解决方案 #

1. 用更早触发的事件替代click

移动端的touchstart或mousedown事件触发时机远早于click（click存在300ms左右的延迟），能在浏览器尝试唤起App前完成cookie设置：

window.onload = function() {
    const setAppCookie = (element) => {
        const appName = element.getAttribute('data-app');
        document.cookie = `appName=${appName}; expires=${cookieExpires}; domain=${domain}`;
    };

    Array.from(document.getElementsByClassName('link')).forEach(element => {
        // 防重复触发标记
        let isTriggered = false;
        const handleTrigger = () => {
            if (!isTriggered) {
                setAppCookie(element);
                isTriggered = true;
                setTimeout(() => isTriggered = false, 1000);
            }
        };
        // 绑定touchstart适配移动端
        element.addEventListener('touchstart', handleTrigger);
        // 绑定click适配PC端
        element.addEventListener('click', handleTrigger);
    });
};

2. 同步执行核心逻辑+手动触发跳转

如果必须使用click事件，可以先阻止默认跳转行为，同步完成cookie设置后再手动触发deeplink跳转：

window.onload = function() {
    Array.from(document.getElementsByClassName('link')).forEach(element => {
        element.addEventListener('click', (event) => {
            // 阻止默认跳转，优先执行cookie设置
            event.preventDefault();
            
            // 同步完成cookie设置
            const targetLink = event.target.closest('.link');
            const appName = targetLink.getAttribute('data-app');
            document.cookie = `appName=${appName}; expires=${cookieExpires}; domain=${domain}`;
            
            // 手动触发deeplink跳转
            window.location.href = targetLink.href;
        });
    });
};

补充说明 #

• touchstart是目前移动端最稳定的方案，能确保在浏览器唤起App前完成逻辑执行；
• 手动跳转方式需测试兼容性，部分浏览器可能对自定义协议的跳转有特殊限制。

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