onclick/ontouchstart触发Leaflet地理定位移动端失效问题排查

• 基于Leaflet实现的用户地理定位功能PC端运行全部正常，移动端访问时，触摸屏幕上的定位图片无法触发getPosition函数执行
• 已完成的验证项：
  • 定位图片绑定的onclick事件可正常触发地理定位逻辑
  • 单独为ontouchstart事件绑定alert('test')测试可正常弹出提示，但在ontouchstart事件回调中调用地理定位相关方法时无任何响应

HTML结构 #

<div id="image">
  <img src="location.png">    
</div> 

地图初始化逻辑 #

var map_init = L.map('map');

地理定位回调函数 #

function getPosition(position) {
  console.log(position)
  lat = position.coords.latitude;
  long = position.coords.longitude;
  accuracy = position.coords.accuracy;

  if (marker) {
     map_init.removeLayer(marker);
  }

  if (circle) {
     map_init.removeLayer(circle);
   }

   marker = L.marker([lat, long]);
   circle = L.circle([lat, long], { radius: accuracy });

   // 创建Leaflet要素组，将子图层统一加入组后添加到地图
   var featureGroup = L.featureGroup([marker, circle]).addTo(map_init);

   map_init.fitBounds(featureGroup.getBounds());

   console.log("Your coordinate is: Lat: " +lat +" Long: " +long +" Accuracy: " +accuracy);        
};

事件绑定逻辑 #

var image = document.getElementById('image');
image.onclick = function() {
  navigator.geolocation.getCurrentPosition(getPosition);
}
image.ontouchstart =function() {
  navigator.geolocation.getCurrentPosition(getPosition);
}

• 移动端浏览器对地理定位这类涉及用户隐私的敏感API有严格调用限制：仅允许在可信用户交互的回调中发起调用，iOS Safari、各平台内置WebView、高版本安卓Chrome等主流移动端环境，不将touchstart事件判定为可信交互源，会直接静默拦截API调用，不抛出任何前台报错。
• 同时绑定touchstart和click事件时，单次触摸操作会先后触发两个事件回调，短时间内重复调用navigator.geolocation.getCurrentPosition会被浏览器判定为重复请求，直接丢弃调用。
• Leaflet初始化后会在地图容器上绑定全局触摸事件监听，默认会拦截容器内触摸事件的冒泡传播，如果定位按钮放在地图容器内部，未做事件隔离的情况下，touch事件的执行上下文会被Leaflet修改，进一步导致浏览器判定API调用不满足用户交互要求。
• 原代码调用getCurrentPosition时未传入错误回调，定位被拦截、权限拒绝、定位失败时不会输出任何日志，提升了问题排查难度。

按优先级排序选择即可：

1. 无极致响应速度要求的场景，直接删除ontouchstart事件绑定即可。在页面<head>中加入移动端视口配置，禁用浏览器默认的300ms点击延迟，此时click事件在移动端的响应速度和touch事件无感知差异，且click属于所有浏览器均认可的可信交互事件，不会触发敏感API拦截：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   

2. 必须绑定touch事件追求更快响应速度的场景，修改ontouchstart回调逻辑，阻止默认行为和事件冒泡，避免被Leaflet拦截、避免重复触发click事件，同时补充错误回调打印失败信息：

   image.ontouchstart = function(e) {
     e.preventDefault();
     e.stopPropagation();
     navigator.geolocation.getCurrentPosition(
       getPosition,
       function(err) {
         console.log('定位失败，错误码：' + err.code + '，错误信息：' + err.message);
       }
     );
     return false;
   }
   // 此时需要移除原有的onclick事件绑定，避免重复触发
   

3. 检查定位按钮的DOM层级：如果定位按钮放在Leaflet的map容器内部，需要给按钮元素设置高于Leaflet图层的z-index，同时添加CSS属性pointer-events: auto，避免被地图的遮罩层拦截触摸操作。
4. 确认访问环境符合敏感API调用要求：生产环境必须使用HTTPS协议部署，本地调试使用localhost或127.0.0.1访问，HTTP环境下多数移动端浏览器会静默拦截地理定位请求。

内容的提问来源于stack exchange，提问作者Madea