Highmaps在iOS设备上点击事件无法触发问题求助

我之前也碰到过类似的iOS端Highmaps点击无响应的问题，结合你的代码和场景描述，给你几个可行的排查和解决方向：

1. 调整pinchType配置，避免手势冲突 #

你在chart配置里设置了pinchType: 'xy'，这个配置会开启双指缩放的手势识别，但在iOS设备上，Highmaps的点击事件很容易被触摸手势的逻辑拦截。试试移除或者修改这个配置：

chart: {
    style : {
        fontFamily: 'Roboto, sans-serif',
    },
    // 移除pinchType，或者设置为'none'
    pinchType: 'none'
},

2. 兼容iOS触摸事件，显式监听touchstart #

iOS的触摸事件模型和桌面端不同，单纯监听click事件可能无法被正确触发。可以在series.events里同时添加touchstart事件的处理，同时做个简单的防抖避免重复触发：

events: {
    click: function (e) {
        renderCharts.fromMap(e);
    },
    touchstart: function(e) {
        // 防抖处理，避免重复触发
        if (this.lastTouchTime && Date.now() - this.lastTouchTime < 300) return;
        this.lastTouchTime = Date.now();
        renderCharts.fromMap(e);
    }
},

3. 暂时禁用allowPointSelect排查冲突 #

你设置了allowPointSelect: true，这个功能在iOS上可能和点击事件的触发逻辑产生冲突。可以先注释掉这个配置，测试点击事件是否恢复正常：

plotOptions: {
    series : {
        // allowPointSelect: true
    }
},

如果恢复正常，再考虑用其他方式实现选中状态（比如通过点击事件手动设置点的select状态）。

4. 检查Highmaps版本是否存在已知bug #

某些旧版本的Highmaps在iOS上处理SVG元素的触摸点击存在兼容性问题，建议升级到最新的稳定版，看看是否能解决这个问题。

附上你提供的地图构建函数代码，方便对照修改：

function buildMap (container,mapData,mapApiData,mapColor,mapTitle) {
    var map = Highcharts.mapChart(container, {
        chart: {
            style : {
                fontFamily: 'Roboto, sans-serif',
            },
            pinchType: 'xy'
        },
        credits : {
            enabled: false
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            },
        },
        colorAxis: {
            tickPixelInterval: 100,
            // minColor: "#ffffff",
            maxColor: mapColor
        },
        title: {
            text: mapTitle,
            style: {
                fontSize: 16,
                weight: 'bold'
            }
        },
        tooltip : {
            enabled: true,
            headerFormat: '',
            backgroundColor: "rgba(0,0,0,0.6)",
            borderWidth: 0,
            borderRadius: 0,
            shadow: false,
            hideDelay: 1500,
            style : {
                color: 'white',
                fontSize: '16px',
                lineHeight: 20
            }
        },
        plotOptions: {
            series : {
                allowPointSelect: true
            }
        },
        series: [{
            data: mapApiData[0].record.data,
            mapData: mapData,
            joinBy: ['CODE',0],
            keys: ['CODE', 'value'],
            name: 'Random data',
            animation: true,
            events: {
                click: function (e) {
                    renderCharts.fromMap(e);
                },
            },
            states: {
                select: {
                    color: '#00ff1a'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.properties.postal}'
            },
            borderWidth: 0
        }]
    });
    return map;
}

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