Джажитель флажок/ не нажимая на веб -сайт браузера Safari ⇐ Javascript

[Anonymous]

У меня есть боковая панель с некоторыми параметрами флажки, чтобы отображать вещи на карте на моем сайте. При использовании любого браузера за пределами сафари он работает, но я не могу нажать на них на сафари. Они щелкнут, кажется, не регистрируются или флажковые ящики. Я пытался использовать несколько функций тайм -аута на JavaScript, чтобы попытаться замедлить его, но это не сработало. Есть идеи? ):
let sidebarToggleTimer = 200; // Store the timer to prevent rapid toggling

function toggleSidebarWithDelay() {
// Clear any existing timer if the function is triggered again quickly
if (sidebarToggleTimer) {
clearTimeout(sidebarToggleTimer);
}

// Set a new timer to toggle the sidebar after 200ms
sidebarToggleTimer = setTimeout(() => {
document.getElementById("sidebar").classList.toggle("closed");
}, 200);
}

// Event Listeners Setup
function setupEventListeners(map, layers, stations) {
let dataType;
let checkboxToggleTimer = 200;

// Function to toggle checkbox with delay (used for legend and attributions)
const toggleCheckboxWithDelay = (elementId, visibility) => {
if (checkboxToggleTimer) {
clearTimeout(checkboxToggleTimer); // Clear the previous timer
}

checkboxToggleTimer = setTimeout(() => {
const element = document.getElementById(elementId);
element.style.display = visibility;
}, 200); // Delay of 200ms before toggling visibility
};

document
.getElementById("rainfall-button")
.addEventListener("click", async () => {
await processFiles();
dataType = "rainfall";
changeData(stations, dataType);
updateMapLabel(getLabelText(dataType));
});

document
.getElementById("soilSaturation-button")
.addEventListener("click", async () => {
await processFiles();
dataType = "soilSaturation";
changeData(stations, dataType);
updateMapLabel(getLabelText(dataType));
});

document
.getElementById("susceptibilityLayer")
.addEventListener("change", (event) => {
const { susceptibilityLayer } = layers;
if (event.target.checked) {
susceptibilityLayer.addTo(map);
} else {
map.removeLayer(susceptibilityLayer);
}
});

document
.getElementById("precipitationLayer")
.addEventListener("change", (event) => {
const { precipitationLayer } = layers;
if (event.target.checked) {
precipitationLayer.addTo(map);
} else {
map.removeLayer(precipitationLayer);
}
});

// Prevent double-click on sidebar from zooming the map
document
.getElementById("sidebar")
.addEventListener("dblclick", function (event) {
event.stopPropagation();
});

// Prevent double-click on sidebar button from zooming the map
document
.getElementById("hamburger-button")
.addEventListener("dblclick", function (event) {
event.stopPropagation();
});

// Event delegation for image toggling
document.addEventListener("click", function (event) {
if (event.target.classList.contains("arrow")) {
toggleImage(event);
}
});

// Toggle attributions visibility
const attributionControl = document.querySelector(
".leaflet-control-attribution"
);
const toggleButton = document.getElementById("toggle-attributions");
attributionControl.style.display = "none";
toggleButton.addEventListener("click", function () {
if (checkboxToggleTimer) {
clearTimeout(checkboxToggleTimer); // Clear the previous timer
}
checkboxToggleTimer = setTimeout(() => {
if (attributionControl.style.display === "none") {
attributionControl.style.display = "block";
} else {
attributionControl.style.display = "none";
}
}, 200); // Delay of 200ms before toggling visibility
});

// Event listener for legend checkbox
document
.getElementById("legendToggle")
.addEventListener("change", (event) => {
const visibility = event.target.checked ? "block" : "none";
toggleCheckboxWithDelay("legend-container", visibility);
});

// Event listener for legend checkbox
document
.getElementById("susceptibilityLegendToggle")
.addEventListener("change", (event) => {
const visibility = event.target.checked ? "block" : "none";
toggleCheckboxWithDelay("susceptibility-legend-container", visibility);
});

document
.getElementById("sidebar-toggle")
.addEventListener("click", toggleSidebarWithDelay);
document
.getElementById("hamburger-button")
.addEventListener("click", toggleSidebarWithDelay);
}
< /code>
css: < /p>
input[type="checkbox"],
label {
-webkit-tap-highlight-color: transparent; /* Remove tap highlight */
touch-action: manipulation; /* Prevent default behavior */
}

/* Prevent touch delays */
input[type="checkbox"] {
-webkit-appearance: none; /* Remove default appearance */
appearance: none; /* Remove default appearance */
transform: translate(0%, 30%);
width: 20px; /* Adjust size as needed */
height: 20px; /* Adjust size as needed */
background-color: #fff; /* Background color */
border: 1px solid #ccc; /* Border color */
border-radius: 3px; /* Rounded corners */
cursor: pointer; /* Pointer cursor */
position: relative; /* Position relative for pseudo-element */
}

input[type="checkbox"]:checked::before {
content: "\2713"; /* Checkmark character */
position: absolute; /* Position absolute for pseudo-element */
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Center pseudo-element */
font-size: 16px; /* Adjust size as needed */
color: #000; /* Checkmark color */
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... er-website