このクリック機能は適切なコールバックでも実行しています

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の中にはCancelボタンがあります。これはHTMLであり、CancelForm（）はクリック時に実行されます。 div要素がクリックされると明らかに、私は機能をアンバインドする必要がある、またはFillScreenは、すべてのフォーム入力で実行されますクリックするなど

私はloadコールバック型と同じCancelForm() bind機能させることを試みました。私はすべてを試しました。私は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イベントには、キャプチャと伝播の2つのステージがあります。ほとんどの場合、ほとんどの場合（デフォルトではそうですが）、イベントが伝播ステージであり、イベントはまでです。 DOMツリーです。

基本的には、キャンセルボタンでトリガーするイベントをキャンセルすることです。の前にがトリガーされ、divも90vhにリサイズされます。 https://api.jquery.com/event.stoppropagation/

をそして、あなたは、イベントが通過方法についての詳細を知りたい場合は、私はあなたがこの読んでお勧めします：

jQueryのでは、我々はここでそれについてevent.stopPropagation()

読むとそれをやる https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm

を

@SLaksで言及されているように、コードに間違っていたもう1つの点は、unbindの使用です。匿名関数を束縛するのではなくバインドを解除しようとしましたあなたはdivですべて一緒にトリガーするリスナーの量を増やすだけです。

いずれにしても、両方の要素のリスナーが必要なので、ここでアンバインドする必要はありません。必要なときにイベントをキャンセルするだけです。

十分な話、ここで働い例です：

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

あなたの2番目のbind()コールはFillScreenを通過していません。それはFillScreenを呼び出す無名関数を渡しています。

あなたは決してそれをアンバインドしません。

これまでのように、FillScreenを直接バインドする必要があります。