Leaflet + Cordova + Jquery + Jquerymobile：弹出按钮上的单击事件在 iOS 上不起作用答案

【问题标题】：Leaflet + Cordova + Jquery + Jquerymobile: click events on buttons of popup not working on iOSLeaflet + Cordova + Jquery + Jquerymobile：弹出按钮上的单击事件在 iOS 上不起作用
【发布时间】：2017-09-15 10:02:27
【问题描述】：

我在 Cordova APP 中使用 Leaflet。

我用：

传单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 上发生（模拟器和真实设备） Ripple 和 Android 运行良好...

请注意：按钮似乎根本没有被点击（似乎没有被点击，但没有任何反应）

有什么建议吗？

谢谢

更新

我将案例减少到最低限度，我可以确认它已链接到 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 移动版会出现问题

【问题讨论】：

更新：我将案例减少到最低限度，我发现它明确链接到leaflet.GoogleMutant...

标签： jquery ios cordova leaflet

【解决方案1】：

尝试在寡妇加载时注册您的点击侦听器。使用 jQuery on() 方法可以动态创建元素。

window.onload = function(){

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

}

我也看到添加 CSS

cursor: pointer;

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

【讨论】：

感谢您的建议...尝试了一切都没有运气...无论如何我从 GoogleMutant 切换到 OpenStreetMap 并且现在一切正常...看起来问题就在那里...不知道为什么仅影响 iOS...

【解决方案2】：

好的，它看起来像来自 Nasit 的帖子 Leaflet map issue in Safari using iPhone and iPad

问题是 Safari 不支持指针事件作为在 caniuse.com 上进行了描述，并且因为 googleMutant 插件 CSS 集通过使用 leaflet-top CSS 类将 z-index 值设置为 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

现在它可以工作了。

我不确定此更改会影响什么...感谢 cmets

【讨论】：