javascript - 单击 float div 中的链接不起作用

Question

我有这些电影，当点击电影时，会出现一个 float 的 div。

在这个 float 的 div 中，当它打开时，我需要在 div 中放置一个指向视频/预告片的链接。单击时，我放在该 div 中的任何链接都不起作用。 Chrome 甚至会在将鼠标悬停在链接上时显示该链接，但点击它什么也不会发生。

float div 之外的任何链接都可以正常工作。

我该如何解决这个问题？

请使用运行代码检查此演示。谢谢。

Codepen Demo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="app">
    <h3>Most Popular Movies</h3>
    <section class="movies">
        <div class="movie">
            <img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg" alt="" class="poster" />
            <div class="title">Avengers: Endgame</div>
            <div class="info">
                <span class="length">182 min</span>
                <span class="year">2019</span>
            </div>
            <div class="desc">
                Adrift in space with no food or water, Tony Stark sends a message to Pepper Potts as his oxygen supply starts to dwindle. Meanwhile, the remaining Avengers Thor, Black Widow, Captain America and Bruce Banner must figure out a way to bring back their vanquished allies for an epic showdown with Thanos the evil demigod who decimated the planet and the universe.
                <br>
                <a target="_blank" class="info-btn color small" href="https://www.youtube.com/watch?v=TcMBFSGVi1c"><i class="fas fa-info-circle"></i> Play Trailer</a>
                <div>

                </div>
                <a class="popup-youtube" href="https://www.youtube.com/watch?v=TcMBFSGVi1c">Popup</a>
            </div>

        </div>
        <div class="movie">
            <img src="https://m.media-amazon.com/images/M/MV5BMjU0NDk0N2EtNTliZS00MjNmLTk0M2MtYTMzOTUxMGQwZWI3XkEyXkFqcGdeQXVyMzE0MTQ2NzQ@._V1_.jpg" alt="" class="poster" />
            <div class="title">Top End Wedding</div>
            <div class="info">
                <span class="length">113 min</span>
                <span class="year">2019</span>
            </div>
            <div class="desc">
                Lauren and Ned have 10 days to find Lauren's mother who has gone AWOL in the remote far north of Australia so that they can reunite her parents and pull off their dream wedding.
                <a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
            </div>
        </div>
        <div class="movie">
            <img src="https://cineprog.de/images/Breite_400px_RGB/p_77672.jpg" alt="" class="poster" />
            <div class="title">Dumbo</div>
            <div class="info">
                <span class="length">112 min</span>
                <span class="year">2019</span>
            </div>
            <div class="desc">
                Struggling circus owner Max Medici enlists a former star and his two children to care for Dumbo, a baby elephant born with oversized ears. When the family discovers that the animal can fly, it soon becomes the main attraction bringing in huge audiences and revitalizing the run-down circus. The elephant's magical ability also draws the attention of V.A. Vandevere, an entrepreneur who wants to showcase Dumbo in his latest, larger-than-life entertainment venture.
                <a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
            </div>
        </div>
        <div class="movie">
            <img src="https://m.media-amazon.com/images/M/MV5BODVjZThlMzMtZjQwNy00YjRlLWE5ZTMtMWVlMWUwM2U1NjRkXkEyXkFqcGdeQXVyODcyODY1Mzg@._V1_UY1200_CR90,0,630,1200_AL_.jpg" alt="" class="poster" />
            <div class="title">The Happy Prince</div>
            <div class="info">
                <span class="length">105 min</span>
                <span class="year">2018</span>
            </div>
            <div class="desc">
                His body ailing, Oscar Wilde lives out his last days in exile, observing the difficulties and failures surrounding him with ironic detachment, humour, and the wit that defined his life.
                <a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
            </div>
        </div>
    </section>
    <div class="detail">
        <svg class="close">
            <use xlink:href="#close"></use>
        </svg>
        <div class="movie">
            <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-room.jpg?raw=true" alt="" class="poster" />
            <div class="title">Room</div>
            <div class="info">
                <span class="length">117 min</span>
                <span class="year">2015</span>
            </div>
            <div class="desc">
                Jack is a young boy of 5 years old who has lived all his life in one room. He believes everything within it are the only real things in the world. But what will happen when his Ma suddenly tells him that there are other things outside of Room?
                <a target="_blank" class="info-btn color small" href="https://www.dolby.com/us/en/cinema"><i class="fas fa-info-circle"></i> Play Trailer</a>
            </div>
        </div>
    </div>
</div>

<a class="popup-youtube" href="https://www.youtube.com/watch?v=TcMBFSGVi1c">Trailer Popup</a>
            </div>

CSS

/*Card APP*/

/*-------------------- Body --------------------*/
 *, *::before, *::after {
     box-sizing: border-box;

}

/*-------------------- App --------------------*/
 .app {
     position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80vw;
     height: 390px;
     background: #fff;
     border-radius: 15px;
     box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
}
 .app h3 {
     color: #525661;
     font-size: 17px;
     box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.1);
     padding: 20px 28px 0;
     margin: -6px 0 0 0;
}

/*-------------------- Movies --------------------*/
 .movies {
     display: flex;
     padding: 8px 18px;
}
 .movies .movie {
     padding-right:10%;
     cursor: pointer;
}
 .movies .movie .poster {
     width:11vw;
     margin-bottom: 6px;
     border-radius: 4px;
}
 .movies .movie .poster.active {
     opacity: 0;
}
 .movies .movie .title {
     color: #525661;
     margin-bottom: 4px;
     font-size: 16px;
}
 .movies .movie .info {
     font-size: .95vmax;
     opacity: 0.8;
     color: #8b9095;
     font-family: 'Roboto', sans-serif;
}
 .movies .movie .desc {
     display: none;
}
/*-------------------- Detail --------------------*/
 .detail {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 10;
     padding: 37px 30px 30px 255px;
     display: none;
}
 .detail::before {
     content: '';
     background: #fff;
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 15px;
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
 .detail .close {
     position: absolute;
     top: 21px;
     right: 22px;
     width: 12px;
     height: 12px;
     cursor: pointer;
     border: 6px solid #fff;
     box-sizing: content-box;
     z-index: 10;
}
 .detail .poster {
     position: absolute;
     z-index: 2;
     top: -10%;
     left: -6%;
     height: 100%;
     border-radius: 5px;
     box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
     transition: all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
 .detail .title, .detail .info, .detail .desc, .detail .play, .detail .close {
     transform: translateX(-50px);
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
 .detail .close {
     transform: translateX(10px);
}
 .detail .title {
     font-size: 3vmax;;
     font-weight: 300;
     color: #525661;
     margin-bottom: 5px;
}
 .detail .info {

     font-size: .95vmax;
     opacity: 0;
     margin-left: 2px;
     color: #8b9095;
     font-family: 'Roboto', sans-serif;
}
 .detail .desc {
     text-align: left;
     margin-top: 30px;
     font-size: 1.25vmax;
     line-height: 1.6;
     text-align: left;
     color: #8b9095;
     font-family: 'Roboto', sans-serif;
}
 .detail .play {
     background: linear-gradient(90deg, #e4761f, #ff8b32);
     border: none;
     border-radius: 20px;
     color: #fff;
     font-size: 12px;
     line-height: 1.5;
     padding: 8px 17px;
     margin: 30px 0 0 -2px;
     text-transform: uppercase;
     z-index: 10;
     outline: none !important;
     cursor: pointer;
     opacity: 0;
}
 .detail .play svg {
     vertical-align: middle;
     position: relative;
     top: -2px;
     margin-right: 3px;
}
 .detail.ready::before {
     opacity: 1;
}
 .detail.ready .info {
     opacity: 0.8;
}
 .detail.ready .poster {
     opacity: 1;
     transition-duration: 0.5s;
}
 .detail.ready .title, .detail.ready .info, .detail.ready .desc, .detail.ready .play, .detail.ready .close {
     transform: translateX(0);
     opacity: 1;
     transition-delay: 0s;
     transition-duration: 0.5s;
}
 .detail.ready .title {
     transition-delay: 0.2s;
}
 .detail.ready .info {
     transition-delay: 0.3s;
}
 .detail.ready .desc {
     transition-delay: 0.4s;
}
 .detail.ready .play {
     transition-delay: 0.5s;
}
 .the-most {
     position: fixed;
     z-index: 1;
     bottom: 0;
     left: 0;
     width: 50vw;
     max-width: 200px;
     padding: 10px;
}
 .the-most img {
     max-width: 100%;
}

JS

var $play = $('.play'),
    $detail  = $('.detail'),
    $movie = $('.movie', $detail),
    $close = $('.close');

$('.movies .movie').click(function(){
  $movie.html($(this).html());
  $play.appendTo($movie);

  $poster = $('.poster', this).addClass('active');

  $('.poster', $detail).css({
    top: $poster.position().top,
    left: $poster.position().left,
    width: $poster.width(),
    height: $poster.height()
  }).data({
    top: $poster.position().top,
    left: $poster.position().left,
    width: $poster.width(),
    height: $poster.height()
  })

  $detail.show();

  $('.poster', $detail).delay(10).queue(function(next) {
    $detail.addClass('ready');

    next();
  }).delay(100).queue(function(next){
    $(this).css({
      top: '-10%',
      left: '-6%',
      width: 266,
      height: 400
    });
    next();
  })
})


/*--------------------
Close
--------------------*/
function close(){
  console.log('asd');
  $p = $('.detail .poster');
  console.log($p)
  $p.css({
    top: $p.data('top'),
    left: $p.data('left'),
    width: $p.data('width'),
    height: $p.data('height'),
  })
  $detail.removeClass('ready').delay(500).queue(function(next){
    $(this).hide();
    $poster.removeClass('active');
    next();
  });
}

$close.click(close);
$('body').click(function(e){
  $p = $(e.target).parents();
  if ($p.is('.app')){
    return false;
  } else {
    close();
  }
})


/*--------------------
Thumbnail preview
--------------------*/
setTimeout(function(){
  $('.movie:eq(0)').click();
}, 300);
setTimeout(function(){
  close();
},1700);

//popup trailer

$(document).ready(function() {
    $('.popup-youtube').magnificPopup({
    type: 'iframe'
  });
});


//---------------Mobile--------------

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

Codepen Demo

Answer 1

在正文点击时监听并返回 false 不是一个好习惯。用下面的代码替换您的代码以使其工作

$('body').click(function(e){
  $p = $(e.target).parents();
  if ($p.is('.app')){
    if ($(e.target).hasClass('info-btn')) {
      return true
    }
    else {
      return false;
    }
  } else {
    close();
  }
})