Question

我正在尝试对集群进行一些自定义，当您单击无法进一步扩展的集群时（例如，两个具有相同或非常相似位置数据的对象），该集群中包含的内容列表群集将出现，然后可以与之交互。我能够检索对象，创建列表并将其放置在地图上的正确位置，但是我无法将任何事件绑定到那些列表项。我在地图应用程序的其他部分中创建了类似的功能，并且这些功能似乎按预期工作。这些不是使用Popup库创建的，因此我可以尝试重用该技术，但是放置弹出窗口的便捷性使我至少希望尝试让这些对象处理事件。

我尝试将addEventListener与click，mouseup和mouseenter事件一起使用，但没有触发任何事件。

如何在mapbox弹出窗口中使用eventListener？传递给弹出窗口的HTML是否经过某种方式的消毒？

我当前正在使用mapboxgl 1.2.0。

如何生成弹出窗口：

new mapboxgl.Popup({offset:25}).setHTML(generateListPopup(myEntries).outerHTML)
                            .setLngLat(coords[0])
                            .addTo($scope.map);

内容的生成方式

function generateListPopup(entries){
        var container = document.createElement('div');
        container.maxHeight = "240px";
        container.overflowY = "auto";
        var ul = document.createElement('ul');
        ul.style.listStyle = "none";
        ul.style.padding = "0";
        container.style.background = "blue"; // does set the color to blue
        container.addEventListener('mouseenter', function () { // does not trigger
            console.log("by golly"); // does not show
        });
        angular.forEach(entries, function (e) {
            var li = document.createElement('li');
            var entry = document.createElement('p');
            var f = document.createElement('button');
            entry.innerHTML = e.name;
            entry.style.cursor = "pointer";
            f.addEventListener('mouseup', function () {
                console.log("hello"); // nope
            });
            li.appendChild(f);
            li.appendChild(entry);
            ul.appendChild(li);
        });
        container.appendChild(ul);
        return container;
    }

非常感谢您的帮助！

Answer 1

我只是在弄清楚整个问题之前先打了个完整的问题，所以不妨张贴出来，以防有人遇到相同的问题：

在返回的容器上使用setDOMContent，而不是在返回的容器setHTML上使用outerHTML。我猜测使用outerHTML序列化元素时，绑定事件会丢失。

事件未在mapboxgl弹出窗口内触发

1 个答案: