WebKit浏览器的CSS卡翻转动画可防止链接运行

Question

我正在试图弄清楚如何创建一个卡片翻转动画，当你点击卡片正面的任何地方时触发它，并在鼠标离开时翻转。

我有基本的动画工作，但问题是卡的两侧都包含动画似乎“阻止”的链接。右键单击链接可以正常工作，但直接单击一个链接就会触发动画。

我将如何修改我所拥有的链接才能正确启动？

CodePen上提供了该问题的现场演示。为方便起见，下面列出了代码。

HTML

<div class='flip'>
  <div class='card'>
    <div class='front face'>
      <a href='http://periphery.in'><h3>Rahul</h3></a>
    </div>
    <div class='back face'>
      <a href='http://github.com/O-I'><h3>O-I</h3></a>
    </div>
  </div>
</div>

CSS

.flip {
  -webkit-perspective: 800;
  height: 365px;
  width: 252px;
  position: relative;
  text-align: center;
  line-height: 200px;
}

.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
}

.flip .card {
  width: 100%;
  height: 100%;
  left: -4px;
  top: -4px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.75s;
  position: absolute;
  border: 1px solid black;
}

.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 2;
}

.flip .card .front {
  position: absolute;
  z-index: 1;
  cursor: pointer;
}

.flip .card .back {
  -webkit-transform: rotatey(-180deg);
  cursor: pointer;
}

.back.face {
  overflow-y: scroll;
}

JQuery的

$('.flip').click(function(){
  $(this).find('.card').addClass('flipped').mouseleave(function(){
    $(this).removeClass('flipped');
  });
  return false;
});

我已经在此Stack Overflow question和此bug report中看到了类似的问题，但我仍然无法让我的具体示例发挥作用。任何正确方向的线索都会非常感激。谢谢！

Answer 1

我分叉并修复了您的CodePen（编辑：将其移至JSbin，以便链接操作可以正常工作）。

Here's the awesomeness

CSS更改：

h3 {
    display: inline;
}

要么是<span> lol

使用Javascript：

$(document).on('click', '.flip', function(){
  $(this).find('.card').addClass('flipped').mouseleave(function(){
    $(this).removeClass('flipped');
  });
  return false;
});
$(document).on('click', 'a', function(evt) {
  var e = evt || window.event;
  var clickedOn = (e.currentTarget) ? e.currentTarget : e.srcElement;
  e.stopPropagation();
  window.location.href = clickedOn.href;
});

Answer 2

您需要停止点击事件从您的链接传播到卡片。添加此js代码：

$('.flip a').on('click', function(e){
   e.stopPropagation();
});