我正在嘗試制作一個需要在移動設備和桌面上都可以使用的 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>uj5u.com熱心網友回復：
<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...});
uj5u.com熱心網友回復：
我不知道這是否有幫助，但我認為您可以通過計算 mousedown 和 mouseup 事件上的滑塊左位置來檢測用戶點擊，如果在這兩個事件中，滑塊的左位置相同，那么您可以考慮 click has當用戶單擊 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/
我不知道它是否會有所幫助，但我希望如此。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375083.html
標籤：javascript html css 滑块
上一篇：如何使用標簽制作自定義收音機輸入