如何根据事件点击定义两个不同的函数？

Question

JS 小提琴：https://jsfiddle.net/k140nad9/6/

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>

还有这个 JS 代码：

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)
   }
}

1. 单击复选框功能 A 将其选中，然后 不要单击 div 地图
2. 再次单击复选框功能 A 将其取消选中，然后单击复选框功能 B
3. 第2点之后，您将首先弹出“THIS FUNCTION A”，而不是弹出“THIS FUNCTION B”

如何解决此问题，因此当我单击复选框“功能 B”（基于上面的第 3 点）时，我只会弹出“此功能 B”。

Answer 1

要执行您需要的操作，请首先将复选框更改为

input type="radio"

。这将为您提供一次只允许免费选择其中一个的功能，而不需要任何 JS 逻辑。

从那里，将

click

事件处理程序添加到

#map

元素而不是复选框。然后您可以简单地确定检查哪个无线电并让您的逻辑从那里开始。

另请注意，理想情况下，您不应混合使用 jQuery 和普通 JS 方法，而应坚持使用其中之一。因为这是一个非常简单的用例，所以我只使用了纯 JS。此外，

<input />

元素没有结束

</input>

标签。

这是经过上述修改后的工作示例：

var map = document.querySelector('#map');
var btnA = document.querySelector('#btnA');
var btnB = document.querySelector('#btnB');

map.addEventListener('click', e => {
  if (btnA.checked) {
    console.log('Function A');
  } else if (btnB.checked) {
    console.log('Function B');
  }
});

<input type="radio" name="foo" id="btnA" /> FUNCTION A
<input type="radio" name="foo" id="btnB" /> FUNCTION B
<div id="map">
  MAP
</div>