在为 标签动态添加 href、download 属性的同时绑定 onclick 处理函数时，若未阻止默认跳转行为，点击将直接触发文件下载而忽略事件监听——需显式调用 event.preventDefault() 才能正常执行自定义逻辑。

在为 `` 标签动态添加 `href`、`download` 属性的同时绑定 `onclick` 处理函数时，若未阻止默认跳转行为，点击将直接触发文件下载而忽略事件监听——需显式调用 `event.preventdefault()` 才能正常执行自定义逻辑。

在使用 Blob 生成 GPX 下载链接的场景中（例如结合 Leaflet 加载 GeoJSON 轨迹数据），常见做法是动态创建 元素并设置 href（通过 URL.createObjectURL()）、download（指定文件名）和 onclick（用于埋点、提示或统计）。但开发者常遇到 onclick 回调不执行的问题——根本原因在于：当 元素同时具备 href 和 download 属性时，浏览器会优先执行原生下载行为，导致点击事件在冒泡阶段即被终止，自定义 handler 无法生效。

正确做法是在 onclick 回调中主动阻止默认行为，并手动触发下载流程（可选），从而确保业务逻辑（如弹出赞助提醒、上报分析事件等）得以执行：

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

下载

$.getJSON('my_trails_z.geojson', function(json) {
    trails_json = L.geoJson(json, {     
        onEachFeature: function(feature, layer) {
            // 生成 GPX Blob
            var bb = new Blob([togpx(feature)], { type: 'application/gpx+xml' });
            var gpxLink = document.createElement("a");

            // 设置下载属性
            gpxLink.download = feature.properties.name + ".gpx";
            gpxLink.innerHTML = "GPX-Download";
            gpxLink.href = window.URL.createObjectURL(bb);

            // 绑定点击事件（关键：必须接收 event 参数并阻止默认行为）
            gpxLink.onclick = show_kofi_reminder;

            // 将链接插入 DOM（例如追加到某个容器）
            layer.bindPopup(gpxLink.outerHTML); // 或 appendChild 到指定节点
        }
    });
});

function show_kofi_reminder(event) {
    event.preventDefault(); // ✅ 必须！否则 download 行为立即触发，handler 被跳过

    console.log('Test onclick function...');

    // 可在此处添加任意逻辑：弹窗提示、GA 上报、用户行为记录等
    alert('感谢支持！欢迎通过 Ko-fi 赞助作者 ?');

    // 若仍需触发下载，可手动模拟点击（注意：部分浏览器可能拦截）
    // gpxLink.click();
}

⚠️ 注意事项：

• event.preventDefault() 是核心修复点，缺一不可；
• 动态创建的 元素必须插入 DOM 文档流（如 appendChild() 或通过 bindPopup() 渲染）才能响应用户交互；仅创建未挂载的元素无法触发事件；
• 避免在 onclick 中直接调用 gpxLink.click() 触发二次下载——现代浏览器可能因安全策略拒绝非用户手势触发的下载；推荐将下载逻辑与 UI 提示解耦，或依赖原生 download 属性完成下载；
• 若需兼容旧版 Safari（不支持 download 属性），应降级使用 window.open() + Blob URL，并配合服务器端 Content-Disposition 头。

总结： 标签的 download 行为与 onclick 并非互斥，而是存在执行优先级。通过 preventDefault() 主动干预，即可优雅地在下载前执行任意 JavaScript 逻辑，兼顾功能完整性与用户体验。