綁定初始點擊事件（A）後點擊事件（B）導致事件B火災立即

Question

http://codepen.io/oliecs/pen/womLPJ

var nav = { 

    init: function() { 
     console.log('nav init'); 

     $nav = $('nav'); 
     $navIcon = $('.nav-icon'); 

     $navIcon.on('click',function(){ 
      nav.show(); 
     }) 
    }, 

    show: function() { 
     console.log('nav show'); 

     $nav.addClass('active'); 
     $_DOCUMENT.on('click.navisopen',function(){ //document is a global variable 
      nav.close(); 
     }) 
    }, 

    close: function() { 
     console.log('nav close'); 

     $nav.removeClass('active'); 
     $_DOCUMENT.off('.navisopen'); 
    } 
}; 

我覺得筆比我描述這更好。我想單擊導航圖標打開導航，然後在此之後的任何點擊都會關閉導航。但是，在第一次點擊後立即觸發關閉事件，導致導航功能即時打開和關閉。我不知道如何做到這一點。

Answer 1

您需要

$navIcon.on('click',function(event){ 
     event.stopPropagation(); 
     nav.show(); 
    }) 

因爲首次點擊是冒泡的DOM一路到該觸發事件處理程序的文檔。

Answer 2

file..Use這個代碼

var ecs= {}; 
    ecs.common = (function($) { 
    var $_DOCUMENT = $(document), 
    $_WINDOW = $(window), 
    $nav = $('nav'), 
    $navIcon = $('.nav-icon'); 
    var nav = { 
     init: function() { 
      console.log('nav init'); 
      $nav = $('nav'); 
      $navIcon = $('.nav-icon'); 
      $navIcon.on('click',function(){ 
       nav.show(); 
      }) 
     }, 
     show: function() { 
      console.log('nav show'); 
      $nav.addClass('active'); 
      // $_DOCUMENT.on('click.navisopen',function(){ 
      //  nav.close(); 
      // }) 
     }, 
     close: function() { 
      console.log('nav close'); 
      $nav.removeClass('active'); 
      $_DOCUMENT.off('.navisopen'); 
     } 
    }; 
    //-------------------- 
    // DOM Ready 
    //-------------------- 
    $(function() { 
     nav.init(); 
    }); 

    $(document).mouseup(function (e) { 
     var container = $(".nav-icon"); 
     if (!container.is(e.target) && container.has(e.target).length === 0) { 
      /* if the target of the click isn't the container && nor a descendant of the container */ 
      $nav.removeClass('active'); 
     } 
    }); 
})(jQuery);