第二個事件[onClick]不起作用

Question

我在oen元素上獲得了2個事件[mousedown，點擊]，但是第二個事件只是工作，當我點擊圖片旁邊的時候[它在元素內部] ...我沒有任何詞語:)

下面是一個代碼：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>

嘗試按圖像 - 事件將無法工作。 在圖像上快速按兩次即可使用。

爲什麼會發生？我該如何解決它？

Answer 1

當鼠標按鈕在關閉後恢復到最高狀態時，MouseClick事件正在發光。 從技術上講，當同一個元素髮生向上和向下事件時，它會發出mouseClick。 您的動畫使用類陰影來縮放元素，因此會溢出圖像。 鼠標向下發出圖像，但鼠標向上發出陰影元素，因爲它溢出。

儘量不要擡起鼠標按鈕，等動畫結束。你會發現點擊事件也發生了。

作爲解決方案，您可以將z-index：-1添加到影子類。它會在圖像下繪製元素，所以事件會正常工作。