JSで、クリックで表示非表示するボックス内のリンクは動作の対象外にしたい

###前提・実現したいこと
スマホサイトで、写真をクリックすると、下からキャプションが出て、
再度クリックすると引っ込む動きをJSで実装中で、動き自体はなんとかできたのですが、
キャプションにブランクのリンクがあり、それを押した場合は、キャプション自体は引っこまず、
出たままでいるようにしたいと思っています。

###発生している問題・エラーメッセージ

リンクをクリックすると、キャプションが引っ込んでしまいます。
※リンク自体は正常に開きます。

###該当のソースコード

■該当部分のHTML

<ul id="photoList">
<li>
<div class="inner">
<img alt="" src="images/0000001.jpg">
<div class="mask">
<div class="cap">
<p>キャプションが入ります。<a target="_blank" href="">外部リンク</a></p>
</div><!-- /.cap -->
</div><!-- /.mask -->
</div><!-- /.inner -->
</li>
<!-- 以下、<li>〜</li>が続きます。 -->
</ul>

■JS

$( '#photoList li' ).on("click", function() {
    $(this).toggleClass( 'hover' );
    $(this).siblings().removeClass( 'hover' );
});

■CSS

キャプションは写真全体をマスクして、枠内の下に配置します。

#photoList li { overflow: hidden; position: relative; width: 240px; }
/* 写真の縦横比4:3固定 */
#photoList li:after { padding-top: 75%; display: block; content: ""; }
#photoList li > .inner{ position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; }
#photoList li img { height: 100%; width: auto; }
.mask { background: rgba(0,0,0,.7); bottom: -100%; left: 0; height: 100%; opacity: 1; position: absolute; -webkit-transition: .3s; transition: .3s; width: 100%; z-index: 2; }
.cap { bottom: 0; color: #fff; padding: 10px; position: absolute; width: 100%; }
#photoList li.hover .mask { bottom: 0 }

###試したこと
以下のような書き方ではダメでした。

$( '#photoList li:not(.cap a)' ).on("click", function() {

###補足情報(言語/FW/ツール等のバージョンなど)

行動規範の内容に同意します

回答1件

ベストアンサー

該当のa要素を押した時にも、イベントが伝わることでli要素に関連付けられたイベント（キャプションの開閉）が動いてしまっているので、該当のa要素を押した場合にイベントが伝搬しないようにします。

javascript
1// こちらはそのまま
2$( '#photoList li' ).on("click", function() {
3    $(this).toggleClass( 'hover' );
4    $(this).siblings().removeClass( 'hover' );
5});
6
7// 追記
8$('.cap a').on("click", function() {
9   event.stopPropagation();
10});
11