Unfortunately e.preventDefault() is not working on Firefox. Is this possible or do I missunderstand something?
I checked the documentation on the mozilla page and there it is written we should use event.preventDefault(). However when I try to use event instead of e then VSCode tells me that event (as a word) is deprecated.
I am working on a Image slider at the moment and it is not working correctly on Firefox because e.preventDefault() will be ignored in Firefox. It works great on Chrome.
Actually I thought that Firefox is always up to date with the latest web technology. I am working with the Firefox Developer Edition and it is my favorite browser.
My question:
Is Firefox deprecated and would you recommend the Firefox Developer Edition for a dvelopment browser?
Is there any other way to e.preventDefault() on Firefox?
No I dont think so, it works just fine in Chrome, but in Firefox it doesnt work.
I will finish this exercise in the next days and then I can provide a link/video to show you that e.preventDefault() is not working correctly in Firefox.
Can you just provide us the code? There is no reason that preventDefault shouldn’t be working in FF. There is most likely something else going on here and we probably won’t be able to help you unless we can see your code.
For some reason this is only necessary to make it work on Firefox. Chrome already recognized that with e.preventDefault() I dont want a draggable image (when hovering over the image and click left mousedown) because it is an image slider.
So it seems that we have different codes for different browser in order to archive the same thing this is not really practical…
const carousel = document.querySelector('.img-slider__carousel');
firstImg = carousel.querySelectorAll('img')[0];
arrowIcons = document.querySelectorAll('.img-slider__wrapper i');
let isDragStart = false,
prevPageX,
prevScrollLeft;
showHideIcons = () => {
let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // Getting max scrollable width
// Showing and hiding prev/next icon according to carousel scroll left value
arrowIcons[0].style.display = carousel.scrollLeft == 0 ? 'none' : 'block';
arrowIcons[1].style.display =
carousel.scrollLeft == scrollWidth ? 'none' : 'block';
};
arrowIcons.forEach((icon) => {
icon.addEventListener('click', () => {
let firstImgWidth = firstImg.clientWidth + 10; // Getting first img width and adding 10px margin value
// If clicked icon is left, reduce width value from the carousel else add to it
carousel.scrollLeft += icon.id == 'left' ? -firstImgWidth : firstImgWidth;
setTimeout(() => showHideIcons(), 60); // Calling showHideIcons after 60ms
});
});
const dragStart = (e) => {
// Updating global variables value on mouse down event
isDragStart = true;
prevPageX = e.pageX || e.touches[0].pageX;
prevScrollLeft = carousel.scrollLeft;
};
const dragging = (e) => {
// Scrolling images/carousel to left according to mouse pointer
if (!isDragStart) return;
e.preventDefault();
carousel.classList.add('dragging');
carousel.scrollLeft = e.pageX;
let positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
carousel.scrollLeft = prevScrollLeft - positionDiff;
showHideIcons();
};
const dragStop = () => {
isDragStart = false;
carousel.classList.remove('dragging');
};
carousel.addEventListener('mousedown', dragStart);
carousel.addEventListener('touchstart', dragStart);
carousel.addEventListener('mousemove', dragging);
carousel.addEventListener('touchmove', dragging);
carousel.addEventListener('mouseup', dragStop);
carousel.addEventListener('mouseleave', dragStop);
carousel.addEventListener('touchend', dragStop);
As you can see I added draggable="false to the image tag, when the image tag is without draggable="false then it will not work in Firefox although I have added e.preventDefault() which should prevent the default dragging behavior.
this is not really practical…