无法单击翻转包装器中的链接

Question

我正在使用可以正常工作的转换属性，但是如果我在其中添加任何链接，那么如果我单击背面卡片，它将无法正常工作并在 -180 度时快速旋转回来。 我试图在鼠标离开时删除“翻转”类，但没有运气。请问有什么建议吗？

$(document).ready(function () {
    $('.flipWrapper').click(function () {
        $(this).find('.card').toggleClass('flipped');
        return false;
    });
});

.flipWrapper {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	width: 100%;
	height: 300px;
	position: relative;
	margin: 0 auto;
	cursor: pointer;
	text-align:center;
}

.flipWrapper .card.flipped {
	-webkit-transform: rotatey(180deg);
	-moz-transform: rotatey(180deg);
	-ms-transform: rotatey(180deg);
	-o-transform: rotatey(180deg);
	transform: rotatey(180deg);
}
.flipWrapper .card {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
	margin: 0 auto;
	text-align:center;
}
.flipWrapper .card .face {
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	background:#383838;
	position: absolute;
	margin: 0 auto;
	text-align:center;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 2;
}
.flipWrapper .card .front {
	position: absolute;
	z-index: 1;
	color: white;
	cursor: pointer;
}
.flipWrapper .card .back {
	-webkit-transform: rotatey(-180deg);
	-moz-transform: rotatey(-180deg);
	-ms-transform: rotatey(-180deg);
	-o-transform: rotatey(-180deg);
	transform: rotatey(-180deg);
	background:#383838;
	cursor: pointer;
	width:100%;
	height:100%;
	padding:0;
} 
.flipWrapper .card .back p{
	padding-top:20px;
	text-align:left;
	padding-left:20px;
	padding-right:20px;
} 
.flipWrapper .card .back p:last-child{
	padding-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flipWrapper">
            <div class="card">
            <div class="face front">
            <img src="http://magicpatrick.fr/images/r2.png"alt=""></div>
              <div class="face back">
                <p><small><em>Mariages</em></small></p>
                <p>L’événement le plus magique de la vie d’une personne, le jour de son mariage, est un jour à marquer d’une pierre blanche, et quelle plus belle façon de le célébrer qu’avec un artiste hors du commun. </p><br><a class="" href="google.com">Read more</a>
               
    </div>
   </div>
  </div>

Answer 1

添加这个

$("a.read-more-link").click(function(event){
    event.stopPropagation();
});

你Read More链接是<a class="read-more-link" href="google.com">Read more</a>

event.stopPropagation();

防止当前事件在捕获和 冒泡阶段。

阅读更多关于event.stopPropataion()

$(document).ready(function () {
    $('.flipWrapper').click(function () {
        $(this).find('.card').toggleClass('flipped');
        return false;
    });
  $("a.read-more-link").click(function(e){
    e.stopPropagation();
  })
});

.flipWrapper {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	width: 100%;
	height: 300px;
	position: relative;
	margin: 0 auto;
	cursor: pointer;
	text-align:center;
}

.flipWrapper .card.flipped {
	-webkit-transform: rotatey(180deg);
	-moz-transform: rotatey(180deg);
	-ms-transform: rotatey(180deg);
	-o-transform: rotatey(180deg);
	transform: rotatey(180deg);
}
.flipWrapper .card {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
	margin: 0 auto;
	text-align:center;
}
.flipWrapper .card .face {
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	background:#383838;
	position: absolute;
	margin: 0 auto;
	text-align:center;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 2;
}
.flipWrapper .card .front {
	position: absolute;
	z-index: 1;
	color: white;
	cursor: pointer;
}
.flipWrapper .card .back {
	-webkit-transform: rotatey(-180deg);
	-moz-transform: rotatey(-180deg);
	-ms-transform: rotatey(-180deg);
	-o-transform: rotatey(-180deg);
	transform: rotatey(-180deg);
	background:#383838;
	cursor: pointer;
	width:100%;
	height:100%;
	padding:0;
} 
.flipWrapper .card .back p{
	padding-top:20px;
	text-align:left;
	padding-left:20px;
	padding-right:20px;
} 
.flipWrapper .card .back p:last-child{
	padding-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flipWrapper">
            <div class="card">
            <div class="face front">
            <img src="http://magicpatrick.fr/images/r2.png"alt=""></div>
              <div class="face back">
                <p><small><em>Mariages</em></small></p>
                <p>L’événement le plus magique de la vie d’une personne, le jour de son mariage, est un jour à marquer d’une pierre blanche, et quelle plus belle façon de le célébrer qu’avec un artiste hors du commun. </p><br><a class="read-more-link" href="google.com">Read more</a>
               
    </div>
   </div>
  </div>