当父元素具有属性指针事件时，如何使子元素打开链接:无?

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>