如何修复复选框切换后地图点击触发错误对应函数的问题

原问题现象 #

勾选FUNCTION A后取消，再勾选FUNCTION B，点击地图区域时会先弹出"THIS FUNCTION A"，再弹出"THIS FUNCTION B"，不符合仅触发当前选中功能的预期。

原代码 #

HTML #

<input type="checkbox" id="btnA" onchange="openFunctionA();">
FUNCTION A
</input>
<input type="checkbox" id="btnB" onchange="openFunctionB();">
FUNCTION B
</input>

<div id="map">
MAP
</div>

JavaScript #

var map = document.getElementById('map')
var btnA = document.getElementById('btnA')
var btnB = document.getElementById('btnB')

function openFunctionA() {
if($('#btnA').is(":checked")){
     $('#btnB').attr('disabled', true)
   map.addEventListener('click', function(e){
     alert("THIS FUNCTION A")
    })
   } else {
    $('#btnB').attr('disabled', false)  
   }
}

function openFunctionB() {
 if($('#btnB').is(":checked")){
     $('#btnA').attr('disabled', true)
   map.addEventListener('click', function(e){
     alert("THIS FUNCTION B")
    })
   } else {
    $('#btnA').attr('disabled', false)
   }
}

复现步骤 #

• 点击复选框FUNCTION A勾选，不点击map区域
• 再次点击FUNCTION A取消勾选，接着点击FUNCTION B勾选
• 点击map区域，会先弹出"THIS FUNCTION A"，再弹出"THIS FUNCTION B"

问题原因 #

每次勾选复选框时，都会给map元素新增一个匿名点击事件监听器，之前添加的监听器没有被移除，导致多个事件叠加，点击时依次执行。

修复方案 #

使用命名函数替代匿名函数，在切换功能时移除之前的事件监听器，确保同一时间只有当前选中的功能事件生效。

修改后的JavaScript代码 #

var map = document.getElementById('map')
var btnA = document.getElementById('btnA')
var btnB = document.getElementById('btnB')

// 定义命名的点击事件函数
function functionAClick() {
  alert("THIS FUNCTION A")
}

function functionBClick() {
  alert("THIS FUNCTION B")
}

function openFunctionA() {
  if($('#btnA').is(":checked")){
    $('#btnB').attr('disabled', true)
    // 先移除B的事件，再添加A的事件
    map.removeEventListener('click', functionBClick)
    map.addEventListener('click', functionAClick)
  } else {
    $('#btnB').attr('disabled', false)
    // 取消勾选时移除A的事件
    map.removeEventListener('click', functionAClick)
  }
}

function openFunctionB() {
  if($('#btnB').is(":checked")){
    $('#btnA').attr('disabled', true)
    // 先移除A的事件，再添加B的事件
    map.removeEventListener('click', functionAClick)
    map.addEventListener('click', functionBClick)
  } else {
    $('#btnA').attr('disabled', false)
    // 取消勾选时移除B的事件
    map.removeEventListener('click', functionBClick)
  }
}

修复说明 #

• 将原来的匿名点击事件改为命名函数，这样可以通过removeEventListener精准移除对应事件
• 勾选某功能时，先移除另一功能的事件监听器，再添加当前功能的，避免事件叠加
• 取消勾选时，移除当前功能的事件监听器，确保地图点击无多余触发

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