綁定時調用並循環JavaScript函數

Question

Jsfiddle Demo for working version

Jsfiddle demo for failure version

情況很復雜。 我正在嘗試為移動設備創建一個畫布外導航側欄。 這個想法就像Facebook移動版和Google Plus移動版一樣。

現在工作進展到這里Jsfiddle Demo for working version 。 （請注意，它僅在屏幕小於768px時顯示切換按鈕。它是按照這種方式設計的。）

對於下一步，我想允許用戶通過單擊暗陰影區域退出邊欄模式。 為此，我使用邊欄toggle function bind和unbind RightHandSide_wrapper.click事件。

Jsfiddle demo for failure version

JavaScript的：

var toggle_offcanvas = function(){
    if(
        offcanvas_toggle.prop("checked") == false
    ){
        offcanvas_toggle.prop("checked", true);
         rhs_wrapper.css('cursor', 'pointer' ); 
        rhs_wrapper.css('background-color', 'gray' ); 
        rhs_wrapper.bind("click",toggle_offcanvas);   
        console.log("show slidebar");                
    }
    else 
        {
        offcanvas_toggle.prop('checked', false);
         rhs_wrapper.css('cursor', 'default' ); 
        rhs_wrapper.css('background-color', 'inherit' ); 
        rhs_wrapper.unbind("click",toggle_offcanvas); 
        console.log("hide slidebar");
    }
}
;


$(".offcanvas_button").bind("click",toggle_offcanvas);

這是問題所在。 添加rhs_wrapper.bind("click",toggle_offcanvas); ，每當我單擊切換按鈕時，它將運行toggle_offcanvas函數。 從控制台日志中可以看到，每次單擊切換按鈕都會返回兩個控制台輸出： show slidebar和hide slidebar 。

看來我綁定它時已調用功能toggle_offcanvas 。

請幫忙。

Answer 1

解決方法如下：

http://jsfiddle.net/8XSJJ/

問題是您將單擊處理程序綁定到包含按鈕的div，這將兩次觸發該處理程序。 所以我加了另一層

<div class="graybg">
</div>

使用樣式使其透明：

.graybg {
    position:fixed;
    width:100%;
    height:100%;
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    background: black;
    cursor: pointer;
    z-index: 100; /* behind slide_nav but above everything else */
    display:none; /* initially hidden */
}

基本上，在代碼中而不是rhs_wrapper中使用了這一新層。