Bonjour
J’ai une page générée par node-red pour la gestion de mon chauffage électrique. J’augmente un peu le nombre de zones pour mieux gérer ma conso.
Sur cette page, j’ai beaucoup de slider (curseur) et la page est assez grande avec les programmations horaires.
Le problème, lorsque je descends la page avec la molette de la souris, si je passe sur un curseur, ça modifie sa valeur. Si je ne fais pas attention, ça peut être embêtant.
J’essaie depuis un moment de désactiver les événements liés à la molette de la souris pour les slider sans succès.
ChatGPT m’a aidé à faire une bonne partie du code.
Les évènements sont bien détectés, mais la molette reste toujours active sur les sliders.
<script>
(function() {
// Fonction pour désactiver la molette sur un slider
function disableSliderWheel(slider) {
slider.addEventListener('wheel', (event) => {
console.log(`Desactivation molette slider ${slider}`);
event.stopImmediatePropagation(); // Empêche tout autre écouteur d'exécuter cet événement
event.preventDefault(); // Annule le comportement par défaut
}, { passive: false }); // Permet de prévenir explicitement l'événement
}
// Observer les changements dans le DOM
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList') {
console.log(`Mutation détectée`);
// Rechercher tous les sliders ajoutés dynamiquement
const sliders = document.querySelectorAll('md-slider');
sliders.forEach((slider) => {
if (!slider.dataset.wheelDisabled) {
disableSliderWheel(slider);
slider.dataset.wheelDisabled = true; // Marquer comme traité
}
});
}
});
});
// Configurer l'observation pour tout le document
observer.observe(document.body, {
childList: true,
subtree: true
});
// Désactiver la molette pour les sliders déjà présents au chargement
document.addEventListener("DOMContentLoaded", () => {
const sliders = document.querySelectorAll('md-slider');
sliders.forEach((slider) => {
console.log(`Desactivation molette slider déjà présent ${slider}`);
disableSliderWheel(slider);
slider.dataset.wheelDisabled = true;
});
});
})();
</script>
Si quelqu’un maîtrise bien javascript, je suis preneur 