Clickable L.control на листочке

Question

Я пытаюсь добавить элемент L.Control на карту моего листка. Однако, как только я добавил элемент на свою карту, я заметил, что его не clickable. Я хотел бы отобразить форму внутри этого элемента L.Control, однако я не могу выбрать любые элементы из раскрывающихся меню, так как клики всегда переходят к карте.

Вот в JSfiddle: http://jsfiddle.net/fd3dnnc1/1/

, а также мой JS код:

var map = L.map('map').setView([0.27, 37.66], 6); 

     // add an OpenStreetMap tile layer 
     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     }).addTo(map); 


     var mainMenu = L.Control.extend({ 
       options: {position: 'topright'}, 

     onAdd : function (map) { 
       this._div = L.DomUtil.create('div', 'mainMenu'); 
       this._div.innerHTML = '<h3>Main Menu</h3>'; 

     this._div.innerHTML += '<h4>Data:</h4> MODIS NDVI <h4>AOI:</h4> Kenya, Africa <br><br>' 
     this._div.innerHTML += '<h4>Indicator:</h4>' 
     this._div.innerHTML += '<form><form id="form" class="form" action="" method="POST">' + 
         '<select name="indicator"><option value="NDVI_ABS">NDVI<br>' + 
         '<option value="NDVI_VCI">VCI<br>' + 
         '<option value="RAIN_ABS">Precipitation<br>' + 
         '</select>';       
     this._div.innerHTML += '<input type="submit" value="Refresh Map" name="submit"></form>'; 
     return this._div;  
       },         
     }); 
     map.addControl(new mainMenu()); 

Любые предложения о том, как сделать его интерактивными?

Answer 1

Я нашел решение: Я на самом деле не используя L.Control больше, но я решил использовать новый div tag вместо с использованием CSS (z-index):

JSFiddle: http://jsfiddle.net/fd3dnnc1/3/

#menu { 
position: absolute; 
width: 300px; 
z-index: 100; 
} 


#map { 
height:100%; 
width:100%; 
z-index: 1; 
} 

<div id="map"></div> 
<div id="menu">Menu Content here</div> 

Answer 2

Вы подключили обработчик кликов к своей кнопке? Я обновил свой fiddle с этим:

$('#refreshBtn').on('click', function() { 
    alert('hello world'); 
}); 

и я получаю предупреждение.

Answer 3

Если вы посмотрите на источник L.Control.Layers, который поставляется с листом, вы можете увидеть, что они используют L.DomEvent для отключения или прекращения распространения событий клика и/или прокрутки на контейнере. Вы должны сделать то же самое, и он будет работать, как ожидалось:

if (!L.Browser.touch) { 
    L.DomEvent 
     .disableClickPropagation(this._div) 
     .disableScrollPropagation(this._div); 
} else { 
    L.DomEvent.on(this._div, 'click', L.DomEvent.stopPropagation); 
} 

Обновленный скрипку: http://jsfiddle.net/az9w0r5L/