Leaflet+jQuery实现的切换按钮在部分设备上异常触发问题求助

问题影响 #

这个问题会对正式上线的用户体验造成明显影响：你列出的出问题的设备均为仍有存量用户的旧款移动设备，对应系统多为旧版安卓、黑莓OS，这类用户点击按钮时会出现功能逻辑完全混乱的情况——比如预期点击一次显示十字准星，实际直接触发了标记位置逻辑，或是十字准星刚出现就被移除，完全无法正常使用功能。

问题核心原因 #

1. 旧移动浏览器的事件机制问题：这类旧设备会同时触发touchstart/touchend和click事件，相当于一次触摸操作会被识别为多次点击。
2. 事件绑定方式不严谨：你在控件的onAdd方法内用全局选择器$('button.leaflet-control-startpoint')绑定事件，如果控件多次初始化、或是页面上有多个同类按钮，会出现重复绑定事件的情况，一次点击就会触发多个回调。
3. 变量作用域问题：_crosshair、_marker没有用let/var声明，会变成全局变量，多次调用后逻辑会互相干扰。
4. 缺少重复点击拦截逻辑：没有做防抖/节流，短时间内的多次事件会全部执行。

解决建议 #

1. 修正事件绑定逻辑

不要用全局选择器绑定事件，直接绑定到你当前创建的按钮实例上，避免重复绑定，同时兼容触摸和点击事件：
把原来的

$(function(){
  $('button.leaflet-control-startpoint').one('click', handler1);
  $('button.leaflet-control-startpoint').one("click", _crosshair);
});

替换为：

// 直接绑定当前按钮实例，不需要全局选择器，同时阻止事件冒泡
L.DomEvent.on(button, 'click touchend', L.DomEvent.stopPropagation);
L.DomEvent.on(button, 'click touchend', handler1);
L.DomEvent.on(button, 'click touchend', _crosshair);
// 移除多余的DOM就绪回调，onAdd执行时DOM已经生成

2. 增加点击节流锁

给按钮加点击状态锁，拦截短时间内的重复触发，在handler1、handler2函数最开头加入以下逻辑：

// 250ms内只允许触发一次点击逻辑
if (button.dataset.clickLock === '1') return;
button.dataset.clickLock = '1';
setTimeout(() => {
  button.dataset.clickLock = '0';
}, 250);

3. 修正变量作用域

给_crosshair、_marker加上变量声明，避免变成全局变量污染：

// 声明为onAdd方法内的局部变量
let _crosshair = function() {
  // 原有逻辑不变
}
let _marker = function() {
  // 原有逻辑不变
}

4. 优化事件解绑逻辑

如果继续用jQuery绑定事件，建议使用事件命名空间，避免解绑时误删其他逻辑：

// 绑定时加命名空间
$(button).on('click.toggle', handler1);
$(button).on('click.cross', _crosshair);
// 解绑时按命名空间移除
$(button).off('click.toggle');
$(button).off('click.cross');

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