移动设备下Leaflet LayersControl自定义按钮增删事件适配问题求助

我是JS/jQuery初学者，目前遇到移动设备端Leaflet LayersControl添加、移除自定义按钮的问题，希望得到帮助。

项目说明 #

我开发的地图包含多个图层，需要添加两个按钮实现所有复选框的全选/取消全选功能，该功能逻辑本身已可正常运行。
测试时必须在浏览器中开启触控模拟，项目基于Firefox开发测试。

现有实现方案 #

桌面端（非触控）实现逻辑很简单：右上角为折叠状态的图层控制图标，通过mouseenter和mouseleave事件控制自定义按钮的添加和移除，运行正常，实现方案是用after方法插入自定义HTML。

移动端遇到的问题 #

我不知道应该绑定什么事件来实现按钮的添加和移除。我考虑过添加按钮可以绑定click、tap或者touchstart事件，但不知道如何在LayersControl从展开状态切换为折叠状态时移除按钮。比较复杂的点是需要排除地图内的部分div（包含复选框的LayersControl区域）——如果我点击复选框的话，自定义按钮也会被移除。
现有代码如下：

$('#main-map:not(leaflet-control-layers-expanded > div).click(function() {
  $('.leaflet-custom-buttons').remove()
})
$('.leaflet-control').click(function(e) {
  e.stopPropagation();
});

当前存在的bug：当LayersControl处于展开状态（已加载自定义按钮）时，我点击地图上的Pin标记，自定义按钮会被移除但LayersControl仍保持展开状态，不符合预期，预期是点击标记这类非LayersControl区域时，LayersControl会先折叠再移除按钮。

提问 #

请问我应该使用哪些正确的事件来实现移动设备端自定义按钮的添加和移除？如果我的实现思路本身有问题需要重构代码，也请告知。谢谢！

你当前实现的核心问题是没有依托Leaflet原生的控件状态事件，靠自定义全局点击判断逻辑自然会出现状态不同步的问题，按以下步骤修改即可：

1. 绑定LayersControl原生的展开/折叠事件 #

Leaflet的LayersControl本身自带expand和collapse事件，直接绑定这两个事件控制自定义按钮的增删，能完全和控件本身的状态同步，不需要自行判断点击区域：

// 替换为你初始化时定义的LayersControl实例名，假设实例名为layersControl
layersControl.on('expand', function() {
  // 控件展开时插入自定义按钮，先判断避免重复插入
  if (!$('.leaflet-custom-buttons').length) {
    $('.leaflet-control-layers').after('<div class="leaflet-custom-buttons">你的全选/取消全选按钮HTML代码</div>')
  }
})
layersControl.on('collapse', function() {
  // 控件折叠时直接移除按钮
  $('.leaflet-custom-buttons').remove()
})

2. 补充移动端点击外部自动折叠逻辑 #

Leaflet的LayersControl默认没有点击外部自动折叠的交互，你可以补充这段全局事件判断，兼容移动端和桌面端：

// 同时监听touchstart（移动端）和click（桌面端）事件
$(document).on('click touchstart', function(e) {
  // 判断点击的元素是否属于LayersControl区域内
  const isClickInControl = $(e.target).closest('.leaflet-control-layers').length > 0
  // 点击区域不在控件内、且控件处于展开状态时，触发控件折叠
  if (!isClickInControl && layersControl._expanded) {
    layersControl.collapse()
  }
})

3. 移除冗余代码 #

你之前写的全局点击移除按钮、阻止冒泡的代码可以全部删除，避免事件冲突。

补充说明 #

• 移动端优先响应touchstart事件，比click事件响应快300ms左右，上面的代码已经做了兼容
• 所有操作都依托控件本身的原生状态，不会出现按钮和控件展开状态不同步的问题，点击标记、地图空白区域都会先触发控件折叠，再自动移除按钮
• 点击控件内部的复选框、自定义按钮时，不会触发外部折叠逻辑，符合使用预期

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