jQuery调用geolocation权限弹窗2秒自动关闭 需保留至用户点击操作

问题核心原因 #

• 违反浏览器安全策略要求：现代Chromium内核（Chrome/Edge）、Firefox浏览器均有明确规则：navigator.geolocation 权限弹窗只能由**用户真实主动交互（完整click/tap事件）**直接触发。如果是页面加载自动执行、非点击类事件触发、异步延迟触发的定位请求，浏览器会直接判定为非用户主动发起，权限弹窗会闪一下自动关闭，甚至静默拒绝，不会等待用户操作。代码在$(document).ready生命周期中无用户交互直接调用getLocation()，是触发该问题的首要原因。
• 事件类型不符合用户手势判定标准：原有逻辑为非Edge浏览器绑定mouseup事件，多数浏览器不将mouseup/mousedown判定为有效用户激活手势，通过这类事件触发的定位请求同样会被拦截，导致弹窗自动关闭。
• 异步逻辑时序冲突：getCurrentPosition是异步接口，页面加载时调用getLocation()后立刻同步读取zip cookie，此时用户还未完成权限选择、定位流程尚未执行，代码会直接同步执行getAddressFromZip(defaultZip)逻辑，该操作会抢占页面焦点，间接导致权限弹窗失焦关闭。
• 超时配置逻辑误区：传入的{timeout:5000}参数是定位服务获取经纬度的超时时间，并非权限弹窗的显示时长，但当请求被浏览器拦截时，该超时计时器会直接触发错误回调，会造成弹窗自动关闭触发拒绝逻辑的误判。

位置权限系统弹窗参考效果

修复步骤 #

1. 移除页面加载自动触发定位的逻辑：不要在document.ready中直接调用getLocation()，如果检测到用户没有存zip cookie，先展示引导提示，让用户主动点击「使用当前位置」按钮后再触发定位请求，完全符合浏览器用户手势要求。
2. 统一使用click事件绑定定位触发入口：放弃mouseup/click的浏览器区分逻辑，全量使用click事件，所有浏览器均认可click为有效用户激活手势，不会拦截权限请求。
3. 修正异步时序：把默认zip兜底逻辑放到定位接口的失败回调中，不要在调用定位方法后同步执行兜底逻辑，避免抢占焦点。
4. 调整定位配置：延长timeout时长，避免权限等待阶段提前触发超时回调。

修正后核心代码 #

// 统一使用click事件，移除mouseup适配逻辑
const $locationTrigger = $('.zipEntry-text');

function getLocation() {
  if (!navigator.geolocation) return;
  navigator.geolocation.getCurrentPosition(
    (position) => {
      // 定位成功后根据经纬度转zip，写入cookie
      getZipFromLatLng(position.coords.latitude, position.coords.longitude);
    },
    (err) => {
      // 所有定位/权限失败场景都走默认zip兜底逻辑
      if (!getCookie('zip')) {
        getAddressFromZip(defaultZip);
      }
      if (err.code === err.PERMISSION_DENIED) {
        const locationDisabledcontent = `          
        <div class="text-center zip-alert-heading"><b>Location sharing is disabled on your
        browser.</b></div>
      <p class="text-center zip-alert-subheading">Please enable location sharing in your browser settings. <br /> or
      type in a zip code
      to continue.</p>`;
        // 修正原jQuery选择器判断bug，加length校验元素是否存在
        if ($('.custom-alert').length) {
          $('.custom-alert .modal-body').html(locationDisabledcontent);
          $('.custom-alert').addClass('show');
        }
      }
    },
    // 延长超时时长给用户留足选择时间，也可设为Infinity关闭定位超时
    { timeout: 30000, enableHighAccuracy: false }
  );
}

// 统一绑定click事件
$locationTrigger.on('click', function (e) {
  e.stopPropagation();
  e.preventDefault();
  getLocation();
});

// 弹窗关闭事件全局绑定一次，避免重复绑定触发多次
$('.custom-alert-close').on('click', function () {
  $('.custom-alert').removeClass('show');
})

$(document).ready(function() {
  const zipExists = getCookie('zip');
  if (!zipExists) {
    // 禁止自动触发定位，先展示引导提示，等用户主动点击定位按钮再调用getLocation
    // 只有用户主动点击触发的请求，浏览器才会保持权限弹窗常驻直到用户完成选择
    $('.location-guide-modal').addClass('show');
  }
})

额外说明：如果用户之前已经手动给站点设置过「阻止」位置权限，浏览器不会再弹出权限弹窗，会直接进入PERMISSION_DENIED错误分支，这个是浏览器默认安全行为，只能提示用户手动到站点设置中修改权限，无法通过前端代码绕过。

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