ここではMaps（JS v3） - イベントバブルにイベントリスナーを追加します

Question

information bubbleにポインターイベントを追加しようとしていますが、発砲していません。私はそれをマーカではなく、情報バブルではなくするようにしました。

私はこのようなaddEventHandlerを使用して情報バブルへのEventHandlerを追加しようとしました：

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

私も情報バブルコンテンツ要素にマウスオーバーイベントを追加しようとしました、それはどちらか発生しません。

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'); 
}); 

注：それはUIに追加された後の気泡のためのHTMLのみが構築されています。 getElement（）メソッドがnullを返す前。