Question

我在oen元素上有2个事件[mousedown，click]，但第二个事件正常工作，当我点击图片旁边[它在元素内部]时......我没有语言：）

这是一个代码：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

当鼠标按钮在关闭后返回到up状态时，

MouseClick事件正在发出。因此，技术上当上下事件都在同一元素上发出时，它会发出mouseClick。您的动画使用类阴影缩放元素，因此它会溢出图像。鼠标向下发出图像，但鼠标向上发出阴影元素，因为它溢出。

尽量不要立即抬起鼠标按钮，等待动画结束。你会看到点击事件也被发现了。

作为解决方案，您可以将z-index：-1添加到影子类。它将在图像下绘制元素，因此事件可以正常工作。

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

1 个答案: