Switch 函数在未被调用时触发，在使用 addEventListener 时默认也不会被阻止答案

【问题标题】：Switch function fires when not called, also default not prevented while using addEventListenerSwitch 函数在未被调用时触发，在使用 addEventListener 时默认也不会被阻止
【发布时间】：2019-05-04 12:50:45
【问题描述】：

我想要一个按钮，根据单击或双击，在一个区域中显示不同的文本，或者如果没有单击则根本没有文本，右键单击也不应该显示任何菜单。


<button id='test'>click me</button>
<p id='description'></p>


const descriptrion = document.getElementById('description');

function trySwitch(val){
  let answer=""
  switch(val) {
    case 1: answer="text number one"
    break;
    case 2: answer="text number two"
    break;
    default: answer= "literally nothing"
  }
  return description.innerHTML= answer;
}
const test = document.getElementById('test');

test.addEventListener('click', trySwitch(1));
test.addEventListener('dblclick', trySwitch(2));
test.addEventListener('auxclick', function(event){
  event.preventDefault()
});

无论按钮是 dblclicked 还是根本没有点击，该区域都会显示“文本编号 1”。右键单击按钮显示默认浏览器菜单。

【问题讨论】：

标签： javascript html switch-statement addeventlistener

【解决方案1】：

您将立即调用函数trySwitch，这会将函数返回的值（即answer）传递给addEventListener，而不是传递函数。

将函数的调用表达式包装在另一个函数中。
而且你也不需要return description.innerHTML = answer;

const descriptrion = document.getElementById('description');

function trySwitch(val){
  let answer=""
  switch(val) {
    case 1: answer="text number one"
    break;
    case 2: answer="text number two"
    break;
    default: answer= "literally nothing"
  }
  description.innerHTML= answer;
}
const test = document.getElementById('test');

test.addEventListener('click', () => trySwitch(1));
test.addEventListener('dblclick', () => trySwitch(2));
test.addEventListener('auxclick', function(event){
  event.preventDefault()
});

<div id='description'></div>
<button id="test">Test</button>

【讨论】：

【解决方案2】：

你在这里调用了两次：

test.addEventListener('click', trySwitch(1));
test.addEventListener('dblclick', trySwitch(2));

trySwitch(1) 和 trySwitch(2) 不是函数，它们是函数调用。你传递给addEventListener 的是trySwitch(/* 1 or 2 */) 的评估结果，所以有些字符串，因此在点击/dblclick 时不会发生任何事情。

使trySwitch 成为高阶函数：

function trySwitch(val) {
  return function() {
    let answer=""

    switch(val) {
      case 1: answer="text number one";
        break;
      case 2: answer="text number two";
        break;
      default: answer = "literally nothing";
    }

    return description.innerHTML= answer;
  }
}

【讨论】：