Is Firefox deprecated? - e.preventDefault() is not working on Firefox

Hi Friends!

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?

Thanks for answers! :slight_smile:

According to this (assuming we’re talking about JS), it has been part of FF from version 1.

What is this for? What is the code? Is it possible that there is something else that is causing this?

Thanks for your reply Kevin!

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.

Right. But that doesn’t prove that it is that line of code.

Ok so finally it works in Firefox as well. The reason was that I needed to add draggable="false to the image element, like this:

<img src="/images/img-1.jpg" alt="img" draggable="false" />

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 :thinking: this is not really practical…

This is the HTML Code for the image slider:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/styles.css" />
    <script src="/main.js" defer></script>
    <title>Draggable Image Slider</title>
    <div class="img-slider__container">
      <div class="img-slider__wrapper">
        <i class="fa-solid fa-angle-left"></i>
        <div class="img-slider__carousel">
          <img src="/images/img-1.jpg" alt="img" draggable="false" />
          <img src="/images/img-2.jpg" alt="img" draggable="false" />
          <img src="/images/img-3.jpg" alt="img" draggable="false" />
          <img src="/images/img-4.jpg" alt="img" draggable="false" />
          <img src="/images/img-5.jpg" alt="img" draggable="false" />
          <img src="/images/img-6.jpg" alt="img" draggable="false" />
          <img src="/images/img-7.jpg" alt="img" draggable="false" />
          <img src="/images/img-8.jpg" alt="img" draggable="false" />
          <img src="/images/img-9.jpg" alt="img" draggable="false" />
        <i class="fa-solid fa-angle-right"></i>

This is the JS Code for the image slider:

const carousel = document.querySelector('.img-slider__carousel');

firstImg = carousel.querySelectorAll('img')[0];
arrowIcons = document.querySelectorAll('.img-slider__wrapper i');

let isDragStart = false,

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 += == '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;


  carousel.scrollLeft = e.pageX;
  let positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
  carousel.scrollLeft = prevScrollLeft - positionDiff;

const dragStop = () => {
  isDragStart = false;

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 topic was automatically closed 182 days after the last reply. New replies are no longer allowed.