如何为外部和内部元素添加不同的事件处理程序？

Question

我正在为一个即将举行的展览设计项目，需要您的一些脚本帮助。我使用jQuery来实现图片点击时的过渡，效果确实很好。

现在，我想实现某种灯箱图库，通过在特定图像上单击两次即可放大图像。此后，当单击放大图像以外的任何位置时，灯箱图库应关闭。我所知道的是，我需要在jQuery中另一个onClick事件...但是老实说，我很迷路！

我希望有人可以在这里帮助我。

这是我现在使用的代码：

jQuery(document).ready(function($){
  $('ul.cards').on('click', function(){
    $(this).toggleClass('transition');
  });
});

ul.cards{
  width: 1500px; margin: 0 auto 20px;
  height: 450px;
  list-style-type: none;
  position: relative;
  padding: 50px 0;
  cursor: pointer;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.card{
    background: #FFF; overflow: hidden;
    height: 300px; width: 250px;
    border-radius: 7.5px;
    position: absolute; left: 0px;
    box-shadow: 1px 2px 2px 0 #aaa;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
    img{
       max-width: 100%; height: auto; 
    }
    div.content{
      padding: 5px 10px;
      h1{
        
      }
      p{
        
      }
    }
    
    &.card-1{ 
      z-index: 10; transform: rotateZ(-2deg);
    }
    &.card-2{ 
      z-index: 9; transform: rotateZ(-7deg);
      transition-delay: 0.05s;
    }
    &.card-3{ 
      z-index: 8; transform: rotateZ(5deg);
      transition-delay: 0.1s;
    }
  }
  
  &.transition{
    li.card{
      transform: rotateZ(0deg);
      &.card-1{
        left: 560px;
      }

      &.card-2{
        left: 280px;
      }
      
      &.card-3{
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards">
    <li class="title">
        <h2>Foncemagne, Étienne Lauréault</h2>
    </li>
    <li class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
    </li>
    <li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
    </li>
    <li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
    </li>
</ul>

Answer 1

通常，您需要添加第二个单击处理程序，该处理程序将在单独的卡片上显示：

$('ul.cards').on('click', function() {
    $(this).addClass('transition');
});


$('ul.cards img').click(function() {
    // do lightbox stuff
});

内部元素上的点击处理程序将自动防止冒泡到外部元素的点击处理程序。

就“单击其他位置”而言，SO对此进行了相当广泛的介绍。基本上，您将在文档上设置一个单击处理程序，然后检查目标以查看其是否在包装器元素之外。

请记住，要保持可访问性（对于一般技术和辅助技术而言），关闭按钮非常重要，或者至少可以使用只有屏幕阅读器的消息才能退出。

Fiddle demo