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

Question

我有一个带有两个点击事件的按钮。我在禁用一个 'click' 事件的同时继续另一个事件时遇到问题。

需要有这样的功能，所以第一次点击会提醒（"first was clicked"），第二次点击会提醒（"second was clicked"），第三次点击会提醒（"first was clicked" ), 第四次点击将提醒 ("second was clicked") 等等...

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

     });

});

Answer 1

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");

Answer 2

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

$('#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>

Answer 3

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

<button onClick="clicked();">Click</button>

使用布尔标志检查

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

Answer 5

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

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

How to activate and disable jQuery 'click' events on an HTML element

javascript

jquery

dom

client-side-scripting

web-frontend