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

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

2 个答案: