這個點擊功能即使用適當的回調也能執行

Question

我不能爲我的生活指出爲什麼這些功能正在執行。我理解用於綁定函數的正確語法如下。

$('#idOfThing').bind('click', foofunc); 
function foofunc() { ///do things } 

但是，我的代碼正在進行中。這些綁定/解除綁定中的任何一個都起作用，或者其他綁定/解綁定不起作用。我嘗試過所有我能想到的組合。

$(window).on("load", function() { 
     $('#divContactSticky').addClass("bottomDiv"); 
     $('#divContactSticky').bind('click', FillScreen); 

     }); 

     var FillScreen = function() { 
      $('#divContactSticky').unbind("click", FillScreen); 
      $('#divContactSticky').css('height', '90vh'); 
     }; 

     function CancelForm() { 
       $('#divContactSticky').css('height', '77px'); 
       $('#divContactSticky').bind('click', function() { 
        FillScreen(); 
       }); 
     } 

這個問題的關鍵在於將div固定在窗口的底部。當用戶點擊該div時。 ViewPort將填滿div。在這個div裏面有一個取消按鈕。它是html，並且CancelForm（）將在點擊時執行。顯然，一旦格被點擊時，我不得不取消綁定功能，或FillScreen都會在每一個表單輸入執行點擊等

我試圖使CancelForm() bind功能一樣load回調類型。我已經嘗試了一切。我已將FillScreen =設爲匿名功能。我已經嘗試了幾乎所有我能想到的返回類型的組合。我哪裏錯了？

編輯：

CancelForm已經收到了改造，並且問題仍然存在。如下所示的CancelForm立即執行FillScreen。

function CancelForm() { 
      $('#divContactSticky').css('height', '77px'); 
      $('#divContactSticky').bind('click', FillScreen); 

    } 

**編輯2：**

@Radicate有部分正確的答案。綁定和開/關之間有一個主要區別。下面的代碼是最終工作的。

$(document).ready(function() { 
    $('.cancelb').click(function() { 
     CancelForm(); 
    }); 
    $('#divContactSticky').click(FillScreen); 
} 
$(window).on("load", function() { 
     $('#divContactSticky').addClass("bottomDiv"); 
     $('#divContactSticky').on('click', FillScreen); 

     }); 

     var FillScreen = function() { 
      $('#divContactSticky').off("click", FillScreen); 
      $('#divContactSticky').css('height', '90vh'); 
     }; 

     function CancelForm() { 
       $('#divContactSticky').css('height', '77px'); 
       $('#divContactSticky').on('click', FillScreen); 
        event.stopPropagation() 
       }); 
     } 

Answer 1

您遇到的情況是事件傳播，因爲取消按鈕位於div內。

DOM事件有兩個階段，捕獲和傳播 - 我們在大多數情況下處理的內容（因爲它大部分是默認的）是傳播階段，其中事件傳播到 DOM樹。

所以基本上我們要做的是取消該事件觸發時取消按鈕，之前它是在格觸發，以及這將再次調整我們的div 90vh。

在jQuery中，我們將與event.stopPropagation()

讀做這件事的位置： https://api.jquery.com/event.stoppropagation/

如果你想了解更多有關事件經過的路上，我建議你閱讀本： https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm

您的代碼出錯了，正如@SLaks提到的那樣，您可以使用unbind--其中您嘗試解除匿名函數的綁定，而不是按照綁定方式解除綁定 - s o你只是增加你的div上的聽衆數量，這些都會一起觸發。

無論如何，在這裏使用unbind是不必要的，因爲我們希望兩個元素都有監聽器，我們只需要在需要時取消事件。

少廢話，這裏是一個工作示例：

$(window).on("load", function() { 
 
    $('#divContactSticky').addClass("bottomDiv"); 
 
    $('#divContactSticky').bind('click', FillScreen); 
 
    $("button.cancel").click(function(){ 
 
\t \t CancelForm(); 
 
\t \t event.stopPropagation(); 
 
\t }); 
 

 
}); 
 

 
var FillScreen = function() { 
 
    $('#divContactSticky').css('height', '90vh'); 
 
}; 
 

 
function CancelForm() { 
 
    $('#divContactSticky').css('height', '77px'); 
 
}

.bottomDiv { 
 
    color:red; 
 
} 
 
#divContactSticky{ 
 
    border:1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divContactSticky"> 
 
    divContactSticky 
 
    <button class="cancel"> 
 
    Cancel 
 
    </button> 
 
</div>

Answer 2

你的第二個電話bind()沒有經過FillScreen;它傳遞了一個匿名函數，該函數恰好稱爲FillScreen。

你從來沒有解開那個。

相反，您應該像以前一樣直接綁定FillScreen。