如何激活和禁用 HTML 元素上的 jQuery 'click' 事件答案

【问题标题】：How to activate and disable jQuery 'click' events on an HTML element如何激活和禁用 HTML 元素上的 jQuery 'click' 事件
【发布时间】：2018-06-08 16:29:18
【问题描述】：

我有一个带有两个点击事件的按钮。我无法禁用一个“点击”事件，同时保持另一个。

需要有功能，所以第一次点击会提示（“第一次点击”），第二次点击会提示（“第二次点击”），第三次点击会提示（“第一次点击”），在第四次点击时会提醒（“第二次被点击”）等等......

<button id="clickable">

$('#clickable').on('click', function first_click () {

    alert("first was clicked");

$("#clickable").off('click', first_click);

    $('#clickable').on('click', function second_click () {

       alert("second was clicked");

  // need to have functionality so on the first click will alert("first was clicked"),  on the second click will alert("second was clicked"), on the third click will alert("first was clicked"), on fourth click will alert("second was clicked") and so on...    

     });

});

【问题讨论】：

使用布尔标志来识别点击事件

标签： javascript jquery dom web-frontend client-side-scripting

【解决方案1】：

var checkFlag = true;
function clicked(){
  if(checkFlag == true){
  alert("first clicked");
  }else{
  alert("Second clicked");
  }
  checkFlag = !checkFlag;
}

&lt;button onClick="clicked();"&gt;Click&lt;/button&gt;

使用布尔标志检查

【讨论】：

【解决方案2】：

jQuery 代码：

// making disabled
$("#clickable").attr('disabled', '')

// making enabled
$("#clickable").removeAttr('disabled')

您也可以使用纯 JS 代码来完成此操作。

var btn = document.getElementById("clickable");

// making disabled
btn.setAttribute("disabled", ""); 

// making enabled
btn.removeAttribute("disabled");

【讨论】：

【解决方案3】：

您可以在第一次点击时为您的按钮添加一个特定的类，并检查她是否存在，然后您就可以知道您是在第一次点击还是第二次点击

$('#clickable').on('click', function () {
    if (!$(this).is(".step")) {
      // first click
      $(this).addClass('step');
      console.log("first was clicked");
    } else {
      // second click
      $(this).removeClass('step');
      console.log("second was clicked");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickable">Button</button>

【讨论】：

【解决方案4】：

   <script>
      var clickCount = 1;
      document.getElementById("clickable").addEventListener("click", function(){
        if(clickCount % 2 != 0){
      alert("first was clicked")
           clickCount++;
        }else{
      alert("second was clicked")
           clickCount++;
        }
      });
    </script>

【讨论】：

【解决方案5】：

(function() {
var step = true;
$("#clickable").on('click', function(e) {
    msg = step ? 'first' : 'second';
    alert(msg + ' was clicked!')
    step = !step;
})})()

【讨论】：