Второе событие [onClick] не работает

Question

У меня есть 2 события [mousedown, click] on oen 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>

Попробуйте нажать на изображение - событие не будет работать. Быстрое двухкратное нажатие на изображение будет работать.

Почему это происходит? Как я могу это исправить?

Answer 1

Событие MouseClick emmiting, когда ваша кнопка мыши возвращается в состояние состояния после того, как она была опущена. Итак, технически, когда оба события вверх и вниз испускают один и тот же элемент, он испускает mouseClick. Ваша анимация масштабирует элемент с тенью класса, поэтому он переполняет изображение. Мышь вниз испускает изображение, но мышь вверх испускает элемент тени, потому что он переполняется.

Старайтесь не поднимать кнопку мыши сразу, подождите окончания анимации. И вы увидите, что событие щелчка также включено.

В качестве решения вы можете добавить z-index: -1 в класс тени. Он будет рисовать элемент под изображением, поэтому события будут работать нормально.