Mapbox点击触发重复弹窗问题：如何用条件语句解决？

问题背景 #

开发Mapbox功能时设置了两个交互逻辑：

• 点击「CHOP Zone Transparent」多边形区域，弹出带Comment按钮的弹窗
• 点击标记图标，弹出展示该位置信息的弹窗

但实际点击标记时，会同时弹出两个弹窗（标记信息弹窗+多边形的Comment弹窗）。

问题根源 #

标记图标位于多边形图层上方，点击标记时，点击事件会向下冒泡到下方的多边形图层，同时触发了标记自带的弹窗和多边形图层的click事件弹窗。

三种解决办法 #

办法一：判断点击目标，跳过标记触发多边形弹窗 #

修改多边形图层的点击事件代码，检查点击的是不是标记元素（.store类），如果是就不创建多边形弹窗：

map.on('click', 'CHOP Zone Transparent', (e) => {
    // 检查点击的DOM元素是否属于标记
    if (!e.originalEvent.target.closest('.store')) {
        new mapboxgl.Popup().setLngLat(e.lngLat).setHTML(`
            <button class="open-button" onclick="openForm()">Comment</button>`).addTo(map);
    }
});

办法二：阻止标记的点击事件冒泡 #

给标记的DOM元素添加点击事件，阻止事件传递到地图的多边形图层：

// 遍历创建标记
for (const feature of stores.features) {
    const el = document.createElement('div');
    el.className = 'store';
    // 阻止点击事件冒泡
    el.addEventListener('click', (e) => {
        e.stopPropagation();
    });
    // 创建标记并绑定弹窗
    new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).setPopup(new mapboxgl.Popup({
        offset: 25
    }).setHTML(`
        <h2>${feature.properties.title}</h2>
        <p>${feature.properties.description}</p>
        <button class="open-button" onclick="openForm()">Comment</button>`)).addTo(map);
}

办法三：查询点击位置的要素，避免重复触发 #

在多边形的点击事件里，查询点击位置是否存在标记对应的要素，没有的话再创建弹窗：

map.on('click', 'CHOP Zone Transparent', (e) => {
    // 查询点击点的所有渲染要素，替换成你实际的标记图层ID
    const markerFeatures = map.queryRenderedFeatures(e.point, {
        layers: ['你的标记图层ID']
    });
    // 没有标记要素时才弹出多边形弹窗
    if (markerFeatures.length === 0) {
        new mapboxgl.Popup().setLngLat(e.lngLat).setHTML(`
            <button class="open-button" onclick="openForm()">Comment</button>`).addTo(map);
    }
});

推荐方案 #

优先选办法一或办法二，实现简单且效果直接：

• 办法一适合不想修改标记创建逻辑的场景
• 办法二从事件源头阻止冒泡，逻辑更清晰

内容的提问来源于stack exchange，提问作者Paul Huating Sun