Leaflet + Cordova + Jquery + Jquerymobile：单击iOS上弹出式按钮上的事件

我在Cordova APP中使用Leaflet。Leaflet + Cordova + Jquery + Jquerymobile：单击iOS上弹出式按钮上的事件

我用：

传单1.0.3 + ed36a04
Leaflet.GoogleMutant.js
科尔多瓦
jQuery的
Jquerymobile

我创建了一个带有弹出以下代码：

function onMapClick(e) {  

    getaddressFromLatLon(e.latlng.lat,e.latlng.lng, function(){ 
     map.setView(new L.LatLng(e.latlng.lat,e.latlng.lng), defaultv.selectZoom); 
     popup 
     .setLatLng(e.latlng) 
     .setContent("New My name:"+' '+ 
     '<a href="index.html" id="clickName"><span id="popupSpan">' + $('#My_Name').val() + '</span></a><br/> <input id="popupInput" type="text" value="'+$('#My_Name').val()+'"/></br><input class="btn_addMy" type="button" id="submitMy" value="All"/>' + 
        '<input class="btn_addMy" type="button" id="submitMySup" value="Only"/>' + 
     '' 
     ) 
     .openOn(map); 
     $("#popupInput").keyup(function (e) { 
     $('#My_Name').val(this.value); 
     }); 
     $(".btn_addMy, #clickName").on("click",function (e) { 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
     map.closePopup(); 

     insertMyToDB(e.target.id); 
     }); 
    } 
    ); 
} 

map.on('contextmenu', onMapClick);

我不能单击文本输入或按钮或超链接...

此问题只发生在iOS（包括模拟器和真实设备）纹波和Android做工精细...

请注意：它看起来像按钮没有点击（不是看起来点击，但没有任何反应）

任何建议吗？

感谢

UPDATE

我减少的情况下最低限度，我可以证实它链接到leaflet.GoogleMutant和iOS。

同样的问题发生与Safari浏览器中添加以下代码从googlemutant演示（https://ivansanchez.gitlab.io/Leaflet.GridLayer.GoogleMutant/demo.html）：

function onMapClick(e) { 

map.setView(new L.LatLng(e.latlng.lat,e.latlng.lng), 12); 

var popup = L.popup() 
     .setLatLng(e.latlng) 
    .setContent('<input class="btn_addMy" type="button" id="submitMy" value="All" onclick="alert(\'clicked\')"/>') 
    .openOn(map);} 
map.on('contextmenu', onMapClick);

注：该问题不使用Safari桌面出现，但它的Safari移动

来源

2017-04-19 lui

更新：我减少的情况下最低限度，我发现它的definetively挂leaflet.GoogleMutant ... – lui

好了，它看起来像从Nasit后在 Leaflet map issue in Safari using iPhone and iPad

的问题是，Safari浏览器不支持指针事件上caniuse.com描述而且由于googleMutant插件CSS设置的Z-通过使用传单顶级CSS类，索引值为1000，浏览器认为它位于其他所有内容之上。

包含了正确答案：

下的实际操作来看，我在Leaflet.GoogleMutant.js改变以下行从

this._mutantContainer.style.zIndex = '800'; //leaflet map pane at 400, controls at 1000

到

this._mutantContainer.style.zIndex = '399'; //leaflet map pane at 400, controls at 1000

而且现在它工作。

我不知道什么是这种变化虽然影响...感谢您的意见

来源

2017-04-22 16:13:42 lui

尝试做在widow加载时注册您的点击监听器。使用jQuery on（）方法可以动态创建元素。

window.onload = function(){ 

    $(".btn_addMy").on("click", "#clickName" ,function (e) {}); 

}

而且我已经看到了添加CSS

cursor: pointer;

的元素可以帮助iOS上。最近我只在iOS上遇到类似的问题，这些方法对我很有帮助。

来源

2017-04-19 11:46:08

感谢建议...尝试所有没有运气...无论如何，我从GoogleMutant切换到OpenStreetMap，现在所有作品...它看起来像问题在那里......不知道为什么它只影响iOS ... – lui

Leaflet + Cordova + Jquery + Jquerymobile：单击iOS上弹出式按钮上的事件

回答

相关问题