第二个事件[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添加到影子类。它会在图像下绘制元素，所以事件会正常工作。