無法點擊翻轉包裝中的鏈接

Question

我正在使用可以正常工作的轉換屬性，但是如果我添加了任何鏈接，那麼它將無法正常工作，並在-180度時快速旋轉，如果我點擊後面的卡片。 我試圖刪除鼠標離開「翻轉」類，但沒有運氣。有什麼建議嗎？

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

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

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

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