Leaflet自定义divIcon中编辑图标点击事件无法触发求助

问题说明 #

在Leaflet开发中，自定义divIcon可正常显示，但其中的编辑（铅笔）图标点击事件无法触发，需要实现该图标点击交互。

现有代码 #

const drawShapeLabel = (layer: L.Layer, geoJson, coord, offset, iconAnchor) => {
    const handleEditClick = (event) => {
        console.log("Edit clicked");
    };
    const labelIcon = L.divIcon({
        className: "shape-label " + geoJson?.properties.backendId,
        html: `
                <div>
                    <img style="position: absolute; top: 6px;" src="${Rearrange}">
                    <span style="position: relative; right: -10px; top: -6px;">${
                        geoJson?.properties.label ? geoJson.properties.label : ""
                    }</span>
                    <img id="editButton-${geoJson?.properties.backendId}" 
                    style="position: relative; right: -12px; top: -2px; cursor: pointer;" 
                    src="${Edit}" onclick="{handleEditClick(event)}" alt="Edit">
                </div>
            `,
        iconSize: [80, 20],
        iconAnchor: iconAnchor,
    });

    const marker = L.marker([coord[1], coord[0] + offset], {
        icon: labelIcon,
    });

    // marker
    //     .on("add", () => {
    //         alert("clicked");
    //         const button = document.getElementById(`editButton-${geoJson?.properties.backendId}`);
    //         alert("button");
    //         // if (button) {
    //         //     button.addEventListener("click", handleEditClick);
    //         // }
    //     })
    //     .addTo(context.map);

    // const marker = L.marker([coord[1], coord[0] + offset], { icon: labelIcon });
    // marker.on("click", () => {
    //     console.log("Edit clicked");
    // });

    // const marker = drawShapeLabelComponent(geoJson, coord, offset, iconAnchor);
    marker.addTo(context.map);
};

已尝试的方案 #

• 直接在divIcon内的img标签绑定onclick事件
• 在marker的add事件中尝试获取DOM元素添加点击监听
• 给marker本身绑定点击事件

可行解决方案 #

方案一：利用Marker事件委托（推荐） #

Leaflet的Marker会拦截内部元素的原生点击事件，通过监听Marker的点击事件，判断点击目标是否为编辑图标，实现精准触发：

const drawShapeLabel = (layer: L.Layer, geoJson, coord, offset, iconAnchor) => {
    const handleEditClick = (event) => {
        console.log("Edit clicked");
        console.log("编辑目标数据：", geoJson);
        // 这里添加具体编辑逻辑
    };

    const labelIcon = L.divIcon({
        className: "shape-label " + geoJson?.properties.backendId,
        html: `
                <div>
                    <img style="position: absolute; top: 6px;" src="${Rearrange}">
                    <span style="position: relative; right: -10px; top: -6px;">${
                        geoJson?.properties.label ? geoJson.properties.label : ""
                    }</span>
                    <img class="shape-edit-btn" 
                    style="position: relative; right: -12px; top: -2px; cursor: pointer;" 
                    src="${Edit}" alt="Edit">
                </div>
            `,
        iconSize: [80, 20],
        iconAnchor: iconAnchor,
    });

    const marker = L.marker([coord[1], coord[0] + offset], {
        icon: labelIcon,
    });

    // 监听Marker点击，判断点击目标
    marker.on('click', (e) => {
        const target = e.originalEvent.target;
        if (target.classList.contains('shape-edit-btn')) {
            handleEditClick(e);
        }
    });

    marker.addTo(context.map);
};

方案二：Marker添加后手动绑定DOM事件 #

确保DOM元素已渲染到页面后，获取编辑按钮并绑定点击事件：

const drawShapeLabel = (layer: L.Layer, geoJson, coord, offset, iconAnchor) => {
    const handleEditClick = (event) => {
        console.log("Edit clicked");
        console.log("编辑目标数据：", geoJson);
    };

    const labelIcon = L.divIcon({
        className: "shape-label " + geoJson?.properties.backendId,
        html: `
                <div>
                    <img style="position: absolute; top: 6px;" src="${Rearrange}">
                    <span style="position: relative; right: -10px; top: -6px;">${
                        geoJson?.properties.label ? geoJson.properties.label : ""
                    }</span>
                    <img id="editButton-${geoJson?.properties.backendId}" 
                    style="position: relative; right: -12px; top: -2px; cursor: pointer;" 
                    src="${Edit}" alt="Edit">
                </div>
            `,
        iconSize: [80, 20],
        iconAnchor: iconAnchor,
    });

    const marker = L.marker([coord[1], coord[0] + offset], {
        icon: labelIcon,
    });

    marker.on('add', () => {
        const editBtn = document.getElementById(`editButton-${geoJson?.properties.backendId}`);
        if (editBtn) {
            // 先移除旧监听，避免重复绑定
            editBtn.removeEventListener('click', handleEditClick);
            editBtn.addEventListener('click', handleEditClick);
        }
    }).addTo(context.map);
};

方案三：CSS禁用事件拦截 #

通过CSS让编辑按钮跳过Marker的事件拦截，直接响应原生点击：

/* 全局样式添加 */
.shape-label {
    pointer-events: none;
}
.shape-edit-btn {
    pointer-events: auto !important;
}

修改代码绑定原生事件：

const drawShapeLabel = (layer: L.Layer, geoJson, coord, offset, iconAnchor) => {
    const handleEditClick = (event) => {
        console.log("Edit clicked");
        console.log("编辑目标数据：", geoJson);
    };

    const labelIcon = L.divIcon({
        className: "shape-label " + geoJson?.properties.backendId,
        html: `
                <div>
                    <img style="position: absolute; top: 6px;" src="${Rearrange}">
                    <span style="position: relative; right: -10px; top: -6px;">${
                        geoJson?.properties.label ? geoJson.properties.label : ""
                    }</span>
                    <img class="shape-edit-btn" 
                    style="position: relative; right: -12px; top: -2px; cursor: pointer;" 
                    src="${Edit}" onclick="handleEditClick(event)" alt="Edit">
                </div>
            `,
        iconSize: [80, 20],
        iconAnchor: iconAnchor,
    });

    // 注意：若使用模块化开发，需确保handleEditClick在全局作用域可访问，或调整绑定方式
    window.handleEditClick = handleEditClick;

    const marker = L.marker([coord[1], coord[0] + offset], {
        icon: labelIcon,
    }).addTo(context.map);
};

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