我正在尝试对集群进行一些自定义,在其中单击无法进一步扩展的集群(例如,两个对象具有相同或非常相似的位置数据)时,该集群中包含的内容的列表应该会出现,然后您可以与之交互。我能够检索对象,创建列表并将其放置在地图上的正确位置,但是我无法将任何事件绑定到那些列表项。我在地图应用程序的其他部分中创建了类似的功能,并且这些功能似乎按预期工作。这些不是使用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;
}
非常感谢您的帮助!
我只是在弄清楚问题之前先打了个完整的问题,所以最好在有人遇到相同问题的情况下也将其张贴出来:
在返回的容器上使用setDOMContent
,而不是在返回的容器的setHTML
上使用outerHTML
。我猜测使用outerHTML
序列化元素时,绑定事件会丢失。