javascript - 当父元素具有属性pointer-events : none?时，如何使子元素打开链接

Question

我需要一些帮助来创建一个卡片轮播，该卡片轮播在单击卡片时会向左或向右滑动，并且仅在单击中心的卡片时才打开链接。第一部分(滑动卡片)正在工作。但是，我很难弄清楚如何使居中的卡片在单击后打开链接。我不希望左侧和右侧的卡片打开链接，这就是为什么所有卡片都具有 pointer-events:none 属性。

我尝试删除中心卡的 pointer-events:none 属性(使用 .center-card {pointer-events:auto;})，但是没用。此外，从 .card 中删除 pointer-events:none 并将其添加到左侧和右侧的卡片中，使整个 Javascript 代码变得无用。

我是 Javascript 的绝对初学者，因此非常感谢任何帮助。或者，如果一个可能的解决方案可以仅使用 HTML/CSS 来完成，那就太好了。

const Cards = (() => {

  window.addEventListener(
    "DOMContentLoaded",
    () => {
      setTimeout(init, 1);
    },
    true
  );


  function init(e) {
    if (document.querySelector(".carousel")) {
      let cards = document.querySelector(".carousel");
      cards.addEventListener("click", clicked, false);
      document.querySelectorAll(".carousel .card")[1].click();
    }
  }


  function clicked(e) {
    let card = e.target;
    if (card.getAttribute("data-card")) {
      rearrange(card.getAttribute("data-card"));
    }
  }


  function rearrange(card) {
    let cards = document.querySelectorAll(".carousel .card");
    for (let n = 0; n < cards.length; n++) {
      cards[n].classList.remove("card-left-left");
      cards[n].classList.remove("card-left");
      cards[n].classList.remove("card-center");
      cards[n].classList.remove("card-right");
      cards[n].classList.remove("card-right-right");
    }
    cards[card].classList.add("card-center");
    if (card == 0) {
      cards[3].classList.add("card-left-left");
      cards[4].classList.add("card-left");
      cards[1].classList.add("card-right");
      cards[2].classList.add("card-right-right");
    }
    if (card == 1) {
      cards[4].classList.add("card-left-left");
      cards[0].classList.add("card-left");
      cards[2].classList.add("card-right");
      cards[3].classList.add("card-right-right");
    }
    if (card == 2) {
      cards[0].classList.add("card-left-left");
      cards[1].classList.add("card-left");
      cards[3].classList.add("card-right");
      cards[4].classList.add("card-right-right");
    }
    if (card == 3) {
      cards[1].classList.add("card-left-left");
      cards[2].classList.add("card-left");
      cards[4].classList.add("card-right");
      cards[0].classList.add("card-right-right");
    }
    if (card == 4) {
      cards[2].classList.add("card-left-left");
      cards[3].classList.add("card-left");
      cards[0].classList.add("card-right");
      cards[1].classList.add("card-right-right");
    }
  }

  return {
    init
  };
})();

html, body {
  width: 100%;
  height: 100%; 
  margin: 0px;
  padding: 0px;
  font-family: Poppins, Roboto, Arial;
}

#container {
  background-color: #fff;
  width: 100%;
  height: 200%;
  position: relative;
  z-index: 0;
}

.carousel
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 75%;
  top: 950px;
  margin: 0 auto;
}

.card
{
  display: flex;
  width: 25rem;
  height: 20rem;
  border-radius: 0.5rem;
  transform-origin: center center;
  transform: scale(1) translate(0px,0px) perspective(750px) rotateY(0deg);
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-duration: 0.5s;
  position: absolute;
  top: 0;
  z-index: 3;
  cursor: pointer;
  background: #fff;
  overflow: hidden;
  margin: 50px 0 50px 0;
}

.card *
{
  pointer-events: none;
}

.card-left-left {
  opacity: 0.7;
  transform: scale(0.5) translate(-600px,0px) perspective(750px) rotateY(10deg);
  z-index: 0;
}

.card-left
{
  transform: scale(0.7) translate(-300px,0px) perspective( 750px ) rotateY(10deg);
  -webkit-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
  -moz-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
  box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
  z-index: 1;
}

.card-center
{
  transform: scale(1) translate(0px, 0px) perspective( 750px ) rotateY(0deg);
  -webkit-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
  -moz-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
  box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
  z-index: 3;
}

.card-right
{
  transform: scale(0.7) translate(300px,0px) perspective( 750px ) rotateY(-10deg);
  -webkit-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
  -moz-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
  box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
  z-index: 1;
}

.card-right-right {
  opacity: 0.7;
  transform: scale(0.5) translate(600px,0px) perspective( 750px ) rotateY(-10deg);
  z-index: 0;
}

.card-image
{
  width: 100%;
  height: 80%;
  background: #fff;
  position: absolute;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  clear: both;
}

.card-image img {
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.card-text
{
  width: 100%;
  height: 20%;
  display: flex;
  position: relative;
  top: 80%;
  justify-content: center;
}

.card-text p {
  padding: 20px;
  margin: 0;
  color: black;
}

<div id="container">       
  <div class="carousel">
    <div class="card" data-card="0">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text"><p>Tekst 1</p>
      </div>
    </div>
    <div class="card" data-card="1">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text"><p>Tekst 2</p>
      </div>
    </div>
    <div class="card" data-card="2">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text"><p>Tekst 3</p>
      </div>
    </div>
    <div class="card" data-card="3">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text"><p>Tekst 4</p>
      </div>
    </div>
    <div class="card" data-card="4">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text"><p>Tekst 5</p>
      </div>
    </div>   
  </div>
                                            
</div>

Answer 1

看看这个。我也想重写重新排列函数，但这只是所需的最小更改

如果你也想允许点击文本，你可以添加 onclick
location=hrefs[this.closest(".card").getAttribute("data-card")]

const hrefs=["page1.html","page2.html","page3.html","page4.html","page5.html"]
function clicked(e) {
  let card = e.target;
  let index = card.getAttribute("data-card");
  if (card.getAttribute("data-card")) {
    if (card.classList.contains("card-center")) {
      location = hrefs[index]
    }
    else rearrange(index);
  }
}

const Cards = (() => {

  window.addEventListener(
    "DOMContentLoaded",
    () => {
      setTimeout(init, 1);
    },
    true
  );


  function init(e) {
    if (document.querySelector(".carousel")) {
      let cards = document.querySelector(".carousel");
      cards.addEventListener("click", clicked, false);
      document.querySelectorAll(".carousel .card")[1].click();
    }
  }

  const hrefs = ["page1.html", "page2.html", "page3.html", "page4.html", "page5.hrml"]

  function clicked(e) {
    let card = e.target;
    let index = card.getAttribute("data-card");
    if (card.getAttribute("data-card")) {
      if (card.classList.contains("card-center")) {
        location = hrefs[index]
      } else rearrange(index);
    }
  }

  function arrayRotate(arr, count) {
    count -= arr.length * Math.floor(count / arr.length);
    arr.push.apply(arr, arr.splice(0, count));
    return arr;
  }
  let arr = [0, 1, 2, 3, 4]
  const cnt = {
    "-left-left": -2,
    "-left": -1,
    "-center": 0,
    "-right": 1,
    "-right-right": 2
  }
  const keys = Object.keys(cnt);

  function rearrange(card) {
    const cardDiv = document.querySelector('[data-card="' + card + '"]')
    const cardClass = cardDiv ? cardDiv.className.replace(/card|,-/g, "").trim() : "";
    const count = cnt[cardClass];
    if (count) {
      arrayRotate(arr, count)
    }
    arr.forEach((index, i) => {
      let thisCard = document.querySelector('[data-card="' + index + '"]')
      thisCard.className = "card card" + keys[i]
    })
    let cards = document.querySelectorAll(".carousel .card");
  }

  return {
    init
  };
})();

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family: Poppins, Roboto, Arial;
}

#container {
  background-color: #fff;
  width: 100%;
  height: 200%;
  position: relative;
  z-index: 0;
}

.carousel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 75%;
  top: 950px;
  margin: 0 auto;
}

.card {
  display: flex;
  width: 25rem;
  height: 20rem;
  border-radius: 0.5rem;
  transform-origin: center center;
  transform: scale(1) translate(0px, 0px) perspective(750px) rotateY(0deg);
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-duration: 0.5s;
  position: absolute;
  top: 0;
  z-index: 3;
  cursor: pointer;
  background: #fff;
  overflow: hidden;
  margin: 50px 0 50px 0;
}

.card * {
  pointer-events: none;
}

.card-left-left {
  opacity: 0.7;
  transform: scale(0.5) translate(-600px, 0px) perspective(750px) rotateY(10deg);
  z-index: 0;
}

.card-left {
  transform: scale(0.7) translate(-300px, 0px) perspective( 750px) rotateY(10deg);
  -webkit-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25);
  box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.card-center {
  transform: scale(1) translate(0px, 0px) perspective( 750px) rotateY(0deg);
  -webkit-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25);
  box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

.card-right {
  transform: scale(0.7) translate(300px, 0px) perspective( 750px) rotateY(-10deg);
  -webkit-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25);
  box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.card-right-right {
  opacity: 0.7;
  transform: scale(0.5) translate(600px, 0px) perspective( 750px) rotateY(-10deg);
  z-index: 0;
}

.card-image {
  width: 100%;
  height: 80%;
  background: #fff;
  position: absolute;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  clear: both;
}

.card-image img {
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.card-text {
  width: 100%;
  height: 20%;
  display: flex;
  position: relative;
  top: 80%;
  justify-content: center;
}

.card-text p {
  padding: 20px;
  margin: 0;
  color: black;
}

<div id="container">
  <div class="carousel">
    <div class="card" data-card="0">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text">
        <p>Tekst 1</p>
      </div>
    </div>
    <div class="card" data-card="1">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text">
        <p>Tekst 2</p>
      </div>
    </div>
    <div class="card" data-card="2">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text">
        <p>Tekst 3</p>
      </div>
    </div>
    <div class="card" data-card="3">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text">
        <p>Tekst 4</p>
      </div>
    </div>
    <div class="card" data-card="4">
      <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
      </div>
      <div class="card-text">
        <p>Tekst 5</p>
      </div>
    </div>
  </div>

</div>