如何在同一个元素上进行多次点击事件？答案

【问题标题】：how to make multiple click events on the same element?如何在同一个元素上进行多次点击事件？
【发布时间】：2020-11-26 12:52:04
【问题描述】：

如何在 JavaScript 中对同一元素使用多个点击事件？

我尝试这样做，当我点击 h3 元素时，它会打开它的描述，然后我再次点击它关闭描述的元素。

var p, img,  question;

    function clickOn(){
        img = document.getElementsByClassName('down-arrow')[0];
        p = document.querySelectorAll('p')[0];
        p.setAttribute('class','show-text');
        /*img.setAttribute('class','show');*/
    }

     function clickOff(){
        img = document.getElementsByClassName('down-arrow')[0];
        p = document.querySelectorAll('p')[0];
        p.removeAttribute('class','show-text');
        /*img.removeAttribute('class','show');*/
        } 


    question = document.getElementsByClassName('question')[0];

    question.addEventListener('click', clickOn, false);
    question.addEventListener('click', clickOff, false);

【问题讨论】：

我认为有一个单一的监听器，然后有一个全局变量来控制是打开还是关闭，打开还是关闭...
这能回答你的问题吗？ adding multiple event listeners to one element

标签： javascript

【解决方案1】：

尝试使用切换来添加和删除类https://www.w3schools.com/howto/howto_js_toggle_class.asp：

var p, img,  question;

function clickOn(){
    img = document.getElementsByClassName('down-arrow')[0];
    p = document.querySelectorAll('p')[0];
    p.classList.toggle('show-text');
}

question = document.getElementsByClassName('question')[0];

question.addEventListener('click', clickOn, false);

【讨论】：

不错的方法，我忘记了toggle，点赞+1。

【解决方案2】：

你可以声明一个全局变量

var isTextDisplayed = false;

然后你可以调用同一个事件监听器，并根据位打开或关闭描述。例如

document.getElementById("myBtn").addEventListener("click", function() {
  if(!isTextDisplayed) {
    //HIDE DESCRIPTION CODE
  }
  else {
    //SHOW DESCRIPTION CODE
  }
  isTextDisplayed = !isTextDisplayed;
});

完整代码：

var isTextDisplayed = false;
var description = document.getElementById("description");
document.getElementById("myBtn").addEventListener("click", function() {
      if(!isTextDisplayed) {
        description.style.display = 'none';
      }
      else {
        description.style.display = 'block';
      }
      isTextDisplayed = !isTextDisplayed;
    });

<h3 id="myBtn">CLICK TO TOGGLE DESCRIPTION</h3>

<p id="description">
  Some dummy text for description goes here in the block
</p>

用于演示，see JSFIDDLE CODE

【讨论】：