如何確保單擊功能僅執行一次

Question

當用戶單擊.class或#id ，會對兩個div的css進行一些更改，並且#id的值#id增加1.但是，當用戶單擊其中一個div時，更改應該只是制作一次 - 如果用戶再次點擊，除非刷新頁面，否則不會發生任何事情。

$('.class, #id').one('click', function(e) {
   $('.class, #id').css({
   'background-color' : 'rgb(232,69,73)',
   'color' : '#fff',
   });
 $("#id").html(function(i, val) { return val*1+1 });
 });

上面顯示了我正在使用的代碼。 如您所見，我使用.one來確保代碼只執行一次 。 這是有效的，但問題是用戶可以單擊.class然后單擊#div ，這意味着代碼可以執行兩次 。

我如何編輯它以便代碼只能執行一次 - 單擊一個div意味着無法單擊另一個div。

Answer 1

您可以在兩個對象上設置數據屬性 ，只有在未設置的情況下才增加計數器：

$('.class, #id').one('click', function(e) {
   if (!$(this).data("valueSet")) {
       $('.class, #id').css({
           'background-color' : 'rgb(232,69,73)',
           'color' : '#fff'
       }).data("valueSet", true);
       $("#id").html(function(i, val) { return val*1+1 });
    }
 });

或者，如果您知道沒有其他要保留的jQuery單擊處理程序，則可以取消綁定來自兩個對象的所有jQuery單擊處理程序 ：

$('.class, #id').one('click', function(e) {
    $('.class, #id').off("click").css({
        'background-color' : 'rgb(232,69,73)',
        'color' : '#fff'
    })
    $("#id").html(function(i, val) { return val*1+1 });
 });

或者，您可以通過將事件處理程序放在命名函數中來取消綁定此特定事件處理程序：

function oneClick(e) {
    $('.class, #id').off("click", oneClick).css({
        'background-color' : 'rgb(232,69,73)',
        'color' : '#fff'
    })
    $("#id").html(function(i, val) { return val*1+1 });
}

$('.class, #id').one('click', oneClick);

---

一個更通用的方案將創建一個只能執行一次操作的自定義函數：

function oneAction(fn) {
     var calledYet = false;
     return function() {
          if (!calledYet) {
              calledYet = true;
              return fn.apply(this, arguments);
          }
     }
 }

然后，你可以使用這個：

$('.class, #id').one('click', oneAction(function(e) {
    // this will only ever be executed once
    $('.class, #id').css({
        'background-color' : 'rgb(232,69,73)',
        'color' : '#fff'
    })
    $("#id").html(function(i, val) { return val*1+1 });
}));

Answer 2

我認為您可以使用事件委托代替。 這樣你就可以為所有目標設置一個處理程序，jQuery會在調用后自動刪除它。

 $(document).one('click', '#first,#second', alert.bind(null, 'clicked')); 

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

使用您的代碼將是：

$(document).one('click', '.class, #id', function(e) {
    //handle click
});

下面是另一個示例，說明如何使用命名函數表達式以安全的方式（不影響其他處理程序）手動刪除處理程序：

 $('#first, #second').click(function someClickHandler(e) { alert('clicked!'); $('#first, #second').off('click', someClickHandler); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="first">First</button> <button id="second">Second</button> 

Answer 3

事實上，你正在設置兩個聽眾。 一個在.class ，另一個在#id 。

這意味着您需要存儲狀態變量並在執行任何操作之前進行檢查。

var isClickable = true;
$('.class, #id').one('click', function(e) {
   if(isClickable){
     isClickable = false;
     $('.class, #id').css({
     'background-color' : 'rgb(232,69,73)',
     'color' : '#fff',
     });
   $("#id").html(function(i, val) { return val*1+1 });
  }
 });

這是比向實際DOM元素添加state屬性更好的選擇。