為什么此腳本僅適用於雙擊而不是單擊？

Question

碼：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function () {

$('.click1').click(function () {
    $(".show1").fadeIn(400);
});

$('body, .click1').click(function() { 
    $('.show1').hide(); 
});
});
</script>

上面的腳本可以工作，但是要使其執行fadeIn，需要單擊兩次。 如何更改它，使其在單擊一次時顯示？

Answer 1

對於您的用例，您可以將事件偵聽器應用於文檔的主體（在這種情況下，當您單擊頁面上的任意位置時，您就是在偵聽）。 一旦發生該事件，您就可以查看具體單擊的內容（evt.target），然后從那里有條件地觸發功能。

http://codepen.io/snypelife/pen/Fcjiw

$(function () {

      $('body').on('click', function (evt) {
        if($(evt.target).hasClass('click')){
          $('.show').toggle('fade');
        } else {
          $('.show').fadeOut();
        }
      });

});

Answer 2

click事件（與其他大多數事件一樣）冒泡到父元素。 這實際上意味着，當您單擊'.click1'元素時，此事件首先在此元素上觸發，然后在'body'上觸發。 而且“ body”上的事件偵聽器會立即隱藏該元素。 您可以在此處使用Event.stopPropagation（）防止事件冒泡：

$('.click1').click(function (e) {
    $(".show1").fadeIn(400);
    e.stopPropagation();
});

$('body').click(function() { 
    $('.show1').hide(); 
});