javascript - 为什么此脚本仅适用于双击而不是单击？

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>

上面的脚本可以工作，但为了让它做淡入淡出，它需要被点击两次。如何更改它以便在单击一次时显示？

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(); 
});