javascript - HERE Maps (JS v3) - 向信息气泡添加事件监听器

Question

我正在尝试将指针输入事件添加到 information bubble但它没有开火。我让它可以与标记一起使用，但不能与信息气泡一起使用。

我尝试使用 addEventHandler 将事件处理程序添加到信息气泡中像这样:

var infoBubble = new H.ui.InfoBubble({lat:48.8567, lng:2.3508}, {
    content: "<div>hello</div>"  
});
infoBubble.addEventListener('pointerenter', function (evt) {
    alert('pointerenter');    
});

我还尝试将 mouseOver 事件添加到信息气泡内容元素，但也没有触发。

var infoBubble = new H.ui.InfoBubble({lat:48.8567, lng:2.3508}, {
    content: "<div>hello</div>"  
});

mapUI.addBubble(infoBubble);

var infoBubbleContent = infoBubble.getContentElement();
infoBubbleContent.addEventListener('mouseOver', function(evt){
    alert('mouse over');
});

这是完整的代码。

// Initialize the platform object:
var platform = new H.service.Platform({
'app_id': 'xxx',
'app_code': 'xxx'
});

// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();

// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
  zoom: 4,
  center: {lat:50, lng:5}
});

// Enable the event system on the map instance:
var mapEvents = new H.mapevents.MapEvents(map); 

// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(mapEvents);

// create default UI with layers provided by the platform
var mapUI = new H.ui.UI.createDefault(map, maptypes);

var infoBubble = new H.ui.InfoBubble({lat:48.8567, lng:2.3508}, {
    content: "<div>hello</div>"  
});
infoBubble.addEventListener('pointerenter', function (evt) {
                alert('pointerenter');
});

mapUI.addBubble(infoBubble);

/*
var infoBubbleContent = infoBubble.getContentElement();
infoBubbleContent.addEventListener('mouseOver', function(evt){
    alert('mouse over');
});
*/

var standardMarker = new H.map.Marker(new H.geo.Point(40.4, -3.6833));
standardMarker.addEventListener('pointerenter', function (evt) {
                alert('pointerenter');
});

map.addObject(standardMarker);

Answer 1

虽然 InfoBubble 是一个事件目标，但它自己调度的唯一事件是“statechange”。但是，在添加气泡后，您可以获得气泡的 HTML 元素并在其上使用普通的旧 HTML 事件:

var bubble = new H.ui.InfoBubble({lat:48.8567, lng:2.3508}, {
  content: "<div>hello</div>"  
});
ui.addBubble(bubble);
bubble.getElement().addEventListener('mouseover', function(e) {
  console.log('hello there');
});

注意:气泡的 HTML 仅在将其添加到 UI 后构建。在 getElement() 方法返回 null 之前。