2番目のイベント[onClick]が機能しません

Question

oen要素で2つのイベント[mousedown、click]が表示されますが、2番目のイベントは画像の隣にある[It is inside element] :)ここで

はコードです：codepen.io/Ivanowski/pen/JXeRpp

$('.ripple').on('mousedown', function(event){ 
 
    // Check if shadow exists 
 
    if($(this).find('.shadow').length == 0) 
 
    $(this).append('<span class="shadow"></span>'); 
 

 
    var shadow = $(this).find('.shadow'); 
 
    // Remove animation if it exists 
 
    shadow.removeClass('animation'); 
 

 
    // Set shadow size 
 
    if(!shadow.width() && !shadow.height()) 
 
    { 
 
    var size = Math.max($(this).outerWidth(), $(this).outerHeight()); 
 

 
    shadow.css({ 
 
     width: size, 
 
     height: size 
 
    }); 
 
    } 
 

 
    // Set shadow left, top 
 
    var x = Math.round(event.clientX - this.getBoundingClientRect().left) - (shadow.width()/2); 
 
    var y = Math.round(event.clientY - this.getBoundingClientRect().top) - (shadow.height()/2); 
 

 

 
    shadow.css({ 
 
    left: x+'px', 
 
    top: y+'px' 
 
    }); 
 

 
    // Start animation 
 
    shadow.addClass('animation'); 
 
}); 
 

 
/* 
 
* It does not work 
 
*/ 
 
$('#switcher').on('click', function(){ 
 
    console.log('aaa'); 
 
});

html 
 
    height: 100% 
 
body 
 
    height: 100% 
 
    background: #183145 
 
    display: flex 
 
    align-items: center 
 
    justify-content: center 
 
    
 
.swicher 
 
    padding: 9px 5px 
 
    cursor: pointer 
 
    
 
.ripple 
 
    overflow: hidden 
 
    position: relative 
 
    .shadow 
 
    background: #fff 
 
    border-radius: 100% 
 
    position: absolute 
 
    transform: scale(0) 
 
    &.animation 
 
     animation: ripple 0.6s linear 
 
@keyframes ripple 
 
    100% 
 
    opacity: 0 
 
    transform: scale(2.5)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span id="switcher" class="swicher ripple"> 
 
    <a href="#"> 
 
    <img src="http://i.imgur.com/Ed2ShTk.png" alt="" /> 
 
    </a> 
 
</span>

は画像を押してみてください - イベントは動作しません。 画像を高速に2回押すと機能します。

どうしてですか？どうすれば修正できますか？

Answer 1

MouseClickイベントは、マウスボタンが押し下げられた後のアップ状態に戻るときにエミュレートされます。 技術的には、アップイベントとダウンイベントの両方が同じ要素で発生している場合、mouseClickを送出します。 アニメーションは、要素をクラスシャドウで拡大/縮小して、イメージをオーバーフローさせます。 マウスダウンは画像上で発光しますが、マウスオーバーはオーバーフローしているため、シャドウエレメント上で発光します。

マウスボタンを押し上げずに、アニメーションの終了を待つようにしてください。クリックイベントも発生します。

解決策として、シャドウクラスにz-index：-1を追加できます。画像の下に要素を描画するので、イベントは正常に機能します。