为什么我无法单击卡片滑块中的超链接？

Question

我正在尝试制作一个需要在移动设备和桌面设备上运行的 JavaScript 滑块。应该可以点击每张卡片，将我重定向到另一个页面。

此时我有一个工作滑块，但我无法点击任何卡片。这是由pointer-events: none; 引起的，但如果没有这条线，滑块将无法工作。

有谁知道如何正确地做到这一点或我可以如何以其他方式解决这个问题？

提前致谢，

let slider = document.querySelector(".slider");
let innerSlider = document.querySelector(".slider-inner");

let pressed = false;
let startx;
let x;

//pc controls
slider.addEventListener("mousedown", (e) => {
  pressed = true;
  startx = e.offsetX - innerSlider.offsetLeft;
  slider.style.cursor = "grabbing";
});

slider.addEventListener("mouseevent", () => {
  slider.style.cursor = "grab";
});

slider.addEventListener("mouseup", () => {
  slider.style.cursor = "grab";
});

slider.addEventListener("mouseup", () => {
  pressed = false;
});

slider.addEventListener("mousemove", (e) => {
  if (!pressed) return;

  x = e.offsetX;
  let temp = x - startx;
  innerSlider.style.left = temp + "px";

  checkboundary();
});

function checkboundary() {
  let outer = slider.getBoundingClientRect();
  let inner = innerSlider.getBoundingClientRect();

  if (parseInt(innerSlider.style.left) > 0) {
    innerSlider.style.left = "0px";
  } else if (inner.right < outer.right) {
    let temp = inner.width - outer.width;
    innerSlider.style.left = -temp + "px";
  }
}

.componentContainer {
  display: block;
  height: 220px;
  position: relative;
  width: 1200px;
  margin: auto;
}

.slider {
  position: absolute;
  width: inherit;
  height: 150px;
  overflow: hidden;
  -webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slider-inner {
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  gap: 15px;
  pointer-events: none;
  transition: 0s ease-in;
  padding: 0 5px;

}

.slider-card {
  height: 140px;
  text-align: center;
  width: 240px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px #dbdbdb;
  position: relative;
}

.slider-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: inherit;
  position: absolute;
  width: 100%;
}

<div class="componentContainer">
    <h2>Onze promo's</h2>
    <div class="slider">
        <div class="slider-inner">
            <div class="slider-card" onclick="window.location.href='/test'">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
        </div>
    </div>
</div>

Answer 1

我不知道这是否有用，但我认为您可以通过计算 mousedown 和 mouseup 事件上的滑块左侧位置来检测用户点击，如果在这两个事件中，滑块的左侧位置相同，那么您可以考虑点击已经发生，并在用户点击 JS 的其中一张幻灯片时做任何你想做的事情。像这样的：

slider.addEventListener("mousedown", (e) => {
 pressed = true;
 startx = e.offsetX - innerSlider.offsetLeft;
 slider.style.cursor = "grabbing";
 sliderLeftPos = innerSlider.offsetLeft;
});

slider.addEventListener("mouseup", (e) => {
 slider.style.cursor = "grab";
 const sliderCurrentLeftPos = innerSlider.offsetLeft;
 if (sliderCurrentLeftPos == sliderLeftPos) {
  alert('click');
 }
});

我在这里实现了我的想法（没有详细的）：https://jsfiddle.net/saeed_shamloo/seyqp0gb/

我不知道它是否会有所帮助，但我希望如此。

Answer 2

<div class="componentContainer">
    <h2>Onze promo's</h2>
    <div class="slider">
        <div class="slider-inner">
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a slider-card>
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="#">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
        </div>
    </div>
</div>

首先添加一个链接，这样您就知道它可以通过 href 进行点击。 然后你可以制作一个关于录制卡片类的函数 喜欢

$('.slider-card').on('click',()=>{...do smth...});