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

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

我尝试将addEventListenerclickmouseupmouseenter事件一起使用,但没有触发任何事件。

如何在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;
    }

非常感谢您的帮助!

killshe123 回答:事件未在mapboxgl弹出窗口内触发

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

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

本文链接:https://www.f2er.com/3022470.html

大家都在问