div 类覆盖在视频容器上，防止它被点击

【问题标题】：div class overlays on video container, preventing it from being clickeddiv 类覆盖在视频容器上，防止它被点击
【发布时间】：2021-07-22 01:04:20
【问题描述】：

.split-wrap 正在阻止视频中间被点击。

点击播放图片，打开，然后尝试点击YouTube视频中间，无法点击。

它是如何固定的以便能够被点击？

https://jsfiddle.net/Lsrpbckm/

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");

  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    const thewrap = curtain.parentElement.querySelector(".container");
    show(thewrap);
  }

  const cover = document.querySelectorAll('.jacketa');
  cover.forEach(function(el) {
    el.addEventListener('click', coverClickHandler)
  });
}());

const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  let player

  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    const player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addPlayer(video) {
    const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
    new YT.Player(video, {

      width: 640,
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 1,
        controls: 1,
        loop: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }

  return {
    addPlayer
  };
}());

function onYouTubeIframeAPIReady() {
  const frameContainer = document.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.curtain {
  position: relative;
  width: 100%;
  height: 100%;
}

.curtain.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 10s;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  left: -300px;
}

.curtain.slide .panel-right {
  right: -300px;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.jacketa {
  position: absolute;
  top: 40px;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  display: block !important;
}

.j1 .jacketa {
  left: 30px;
}

.j2 .jacketa {
  right: 30px;
}

.jacketa .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.jacketa .coversvg {
  width: 70px;
  height: 75.4px;
  fill: none;
  stroke-width: 4px;
  stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.15;
}

.jacketa .coversvg .front {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

.split-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 260px;
  margin: auto;
  border-radius: 50%;
  transition: 10s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.curtain.slide .j1 {
  left: -500%;
}

.curtain.slide .j2 {
  left: 500%;
}

.video-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.border {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}

.hide {
  display: none;
}
<div class="curtain">
  <div class="outer">
    <div class="tcell">

      <div class="container hide ">
        <div class="video-wrapper">
          <div class="ratio-keeper">

            <div class="wrap ">
              <div class="video video-frame"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel-left"> </div>
      <div class="panel-right"> </div>

      <div class="split-wrap">
        <div class="j1">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>
        </div>
        <div class="j2">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>


        </div>
      </div>

    </div>
  </div>
</div>

【问题讨论】：

    标签： javascript html css overlay pointer-events


    【解决方案1】：

    edited fiddle

    如果您不想为此使用 JS，一个简单的 CSS hack 方法是将 pointer-events: none; 添加到 .split-wrap 并将 pointer-events: all 添加到 .jacketa .coversvg，如下所示：

    (function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");

  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    const thewrap = curtain.parentElement.querySelector(".container");
    show(thewrap);
  }

  const cover = document.querySelectorAll('.jacketa');
  cover.forEach(function(el) {
    el.addEventListener('click', coverClickHandler)
  });
}());

const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  let player

  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    const player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addPlayer(video) {
    const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
    new YT.Player(video, {

      width: 640,
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 1,
        controls: 1,
        loop: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }

  return {
    addPlayer
  };
}());

function onYouTubeIframeAPIReady() {
  const frameContainer = document.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}
    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.curtain {
  position: relative;
  width: 100%;
  height: 100%;
}

.curtain.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 10s;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  left: -300px;
}

.curtain.slide .panel-right {
  right: -300px;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.jacketa {
  position: absolute;
  top: 40px;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  display: block !important;
}

.j1 .jacketa {
  left: 30px;
}

.j2 .jacketa {
  right: 30px;
}

.jacketa .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.jacketa .coversvg {
  pointer-events: all;
  width: 70px;
  height: 75.4px;
  fill: none;
  stroke-width: 4px;
  stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.15;
}

.jacketa .coversvg .front {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

.split-wrap {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 260px;
  margin: auto;
  border-radius: 50%;
  transition: 10s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.curtain.slide .j1 {
  left: -500%;
}

.curtain.slide .j2 {
  left: 500%;
}

.video-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.border {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}

.hide {
  display: none;
}
    <div class="curtain">
  <div class="outer">
    <div class="tcell">

      <div class="container hide ">
        <div class="video-wrapper">
          <div class="ratio-keeper">

            <div class="wrap ">
              <div class="video video-frame"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel-left"> </div>
      <div class="panel-right"> </div>

      <div class="split-wrap">
        <div class="j1">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>
        </div>
        <div class="j2">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>


        </div>
      </div>

    </div>
  </div>
</div>

    【讨论】：

    • 应该注意的是，当视频悬停时，这将删除cursor: pointer，我相信youtube播放器在任何部分悬停时默认添加......但我可能是错的，我忘记了
    【解决方案2】：

    您可以在隐藏功能中更改 .split-wrap 的 z-index

    function hide(el) {
  el.classList.add("hide");
  el.closest('.split-wrap').style.zIndex = -1;
}

    并在显示功能中返回

    function show(el) {
  el.classList.remove("hide");
  el.closest('.split-wrap').style.zIndex = 'initial';
}

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-01-14
      • 2018-06-27
      • 2013-06-12
      • 1970-01-01
      • 1970-01-01
      • 2021-12-11
      • 2015-12-20
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode