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

Question

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

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

如何在 mapbox 弹出窗口中使用 eventListeners？传递给弹出窗口的 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

我只是在弄清楚之前输入了整个问题，所以也可以 post 以防万一有人遇到同样的问题：

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

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

Events not firing inside mapboxgl popup

javascript

html

mouseevent

mapbox