Функция Switch срабатывает, когда не вызывается, также по умолчанию не предотвращается при использовании addEventListener - PullRequest
Новая
       25

Функция Switch срабатывает, когда не вызывается, также по умолчанию не предотвращается при использовании addEventListener

1 голос
/ 04 мая 2019

Мне нужна кнопка, которая отображает различные тексты в области, в зависимости от того, щелкнули или дважды щелкнули мышью, или нет текста вообще, если не щелкнуть, также щелчок правой кнопкой мыши не должен отображать меню. 


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

область показывает «текст номер один» независимо от того, нажата кнопка или не нажата вообще. Щелчок правой кнопкой мыши показывает меню браузера по умолчанию.

Ответы [ 2 ]

1 голос
/ 04 мая 2019

Вы звоните дважды, здесь: 

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;
  }
}
1 голос
/ 04 мая 2019

Вы немедленно вызываете функцию 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>
...