为<a>标签同时设置href、download和onclick属性无效问题排查

问题原因分析 #

直接给动态创建的<a>标签赋值onclick属性时，可能被浏览器默认下载行为中断，或是元素添加到DOM过程中事件绑定丢失，导致自定义函数无法触发。

修复方案 #

改用addEventListener绑定点击事件，确保自定义逻辑优先执行，再手动触发下载操作，同时处理资源释放：

$.getJSON('my_trails_z.geojson', function(json) {
    trails_json = L.geoJson(json, {     
        onEachFeature: function(feature, layer) {
            // ... 其他业务代码
            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"; 
            const blobUrl = window.URL.createObjectURL(bb);
            gpxLink.href = blobUrl;
            
            // 用addEventListener绑定点击事件
            gpxLink.addEventListener('click', function(e) {
                // 优先执行自定义提醒函数
                show_kofi_reminder();
                // 阻止默认行为，避免提前触发下载中断函数执行
                e.preventDefault();
                
                // 手动触发下载
                const tempLink = document.createElement('a');
                tempLink.href = blobUrl;
                tempLink.download = gpxLink.download;
                document.body.appendChild(tempLink);
                tempLink.click();
                document.body.removeChild(tempLink);
                
                // 释放Blob URL资源，避免内存泄漏
                window.URL.revokeObjectURL(blobUrl);
            });
            
            // 务必将链接添加到DOM中（示例：绑定到Leaflet图层弹窗）
            layer.bindPopup(gpxLink);
            // ... 其他业务代码
        }
    });
});

function show_kofi_reminder() {
     console.log('Test onclick function...')
}

关键修复点 #

• 事件绑定方式：用addEventListener替代直接赋值onclick，避免事件被覆盖或绑定失效
• 执行顺序控制：先运行自定义函数，再手动触发下载，确保逻辑完整执行
• 资源管理：添加window.URL.revokeObjectURL释放Blob URL，防止内存泄漏
• DOM挂载确认：确保创建的链接被正确添加到页面DOM（比如示例中的layer.bindPopup）

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