javascript - 开关函数在未调用时触发，默认情况下在使用 addEventListener 时也不会阻止

Question

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

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

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

Answer 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>