Using preventDefault() in JavaScript Full Guide

const link = document.getElementById("my-link");
 
link.addEventListener("click", (event) => {
  event.preventDefault(); // Stops the browser from navigating
  console.log("Link click intercepted!");
  // Now handle the click with JavaScript instead
});

const form = document.getElementById("signup-form");
 
form.addEventListener("submit", (event) => {
  event.preventDefault(); // Stop the page reload
 
  // Gather form data
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
 
  console.log("Form data:", data);
  
  // Validate
  if (!data.email || !data.password) {
    showError("Please fill in all fields");
    return;
  }
 
  // Submit via JavaScript
  submitFormData(data);
});
 
async function submitFormData(data) {
  const response = await fetch("/api/signup", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  
  if (response.ok) {
    showSuccess("Account created!");
  } else {
    showError("Signup failed");
  }
}

// Single Page Application (SPA) routing
document.addEventListener("click", (e) => {
  const link = e.target.closest("a[href]");
  if (!link) return;
 
  // Only intercept internal links
  if (link.origin === window.location.origin) {
    e.preventDefault();
    const path = link.getAttribute("href");
    navigateTo(path); // Your SPA router
  }
  // External links navigate normally
});

const lockedCheckbox = document.getElementById("premium-feature");
 
lockedCheckbox.addEventListener("click", (e) => {
  if (!userHasPremium) {
    e.preventDefault();
    showUpgradeModal("Upgrade to premium to enable this feature");
  }
});

const canvas = document.getElementById("drawing-canvas");
 
canvas.addEventListener("contextmenu", (e) => {
  e.preventDefault(); // Block default right-click menu
  showCustomContextMenu(e.clientX, e.clientY);
});

document.addEventListener("keydown", (e) => {
  // Prevent Ctrl+S from opening the browser save dialog
  if ((e.ctrlKey || e.metaKey) && e.key === "s") {
    e.preventDefault();
    saveDocument();
  }
 
  // Prevent Ctrl+P from opening print dialog
  if ((e.ctrlKey || e.metaKey) && e.key === "p") {
    e.preventDefault();
    showPrintPreview();
  }
 
  // Prevent F5 page refresh
  if (e.key === "F5") {
    e.preventDefault();
    refreshData(); // Refresh data, not the page
  }
});

const dropZone = document.getElementById("drop-zone");
 
// Prevent the browser from opening dropped files
dropZone.addEventListener("dragover", (e) => {
  e.preventDefault();
  dropZone.classList.add("drag-active");
});
 
dropZone.addEventListener("drop", (e) => {
  e.preventDefault();
  dropZone.classList.remove("drag-active");
  
  const files = e.dataTransfer.files;
  handleFileUpload(files);
});

const link = document.querySelector("a");
 
// preventDefault: stops navigation, event still bubbles to parents
link.addEventListener("click", (e) => {
  e.preventDefault();
  // Parent listeners WILL still fire
});
 
// stopPropagation: stops bubbling, browser still navigates
link.addEventListener("click", (e) => {
  e.stopPropagation();
  // Browser WILL still navigate to the link's href
});
 
// Both: stops navigation AND bubbling
link.addEventListener("click", (e) => {
  e.preventDefault();
  e.stopPropagation();
});
 
// return false: Does NOTHING in addEventListener!
link.addEventListener("click", (e) => {
  return false; // This does NOT prevent default or stop propagation
});

document.addEventListener("click", (e) => {
  if (e.defaultPrevented) {
    console.log("Some other handler already prevented the default");
    return;
  }
  // Handle normally
});

const form = document.getElementById("order-form");
 
form.addEventListener("submit", (e) => {
  const errors = validateForm(form);
  
  if (errors.length > 0) {
    e.preventDefault(); // Only prevent if validation fails
    displayErrors(errors);
  }
  // If no errors, the form submits normally
});
 
function validateForm(form) {
  const errors = [];
  const email = form.querySelector('[name="email"]').value;
  const quantity = form.querySelector('[name="quantity"]').value;
 
  if (!email.includes("@")) {
    errors.push("Please enter a valid email address");
  }
  if (parseInt(quantity) < 1) {
    errors.push("Quantity must be at least 1");
  }
 
  return errors;
}

element.addEventListener("scroll", (e) => {
  console.log("Cancelable:", e.cancelable); // false for scroll events
  e.preventDefault(); // Has no effect on non-cancelable events
});

// GOOD: Preventing and handling
link.addEventListener("click", (e) => {
  e.preventDefault();
  router.navigate(link.href); // Replacement behavior
});
 
// BAD: Preventing without handling
link.addEventListener("click", (e) => {
  e.preventDefault();
  // User clicks... nothing happens. Confusing!
});

document.addEventListener("click", (e) => {
  const link = e.target.closest("a");
  if (!link) return;
 
  // Only intercept internal links
  const isInternal = link.hostname === window.location.hostname;
  const isAnchor = link.getAttribute("href")?.startsWith("#");
  const opensNewTab = link.target === "_blank";
 
  if (isInternal && !isAnchor && !opensNewTab) {
    e.preventDefault();
    handleInternalNavigation(link.pathname);
  }
  // External links, anchors, and new-tab links work normally
});

// GOOD: Progressive enhancement
form.addEventListener("submit", (e) => {
  e.preventDefault();
  // If JavaScript fails, the form still has action="/signup" 
  // and works without JS
  submitWithAjax(form);
});

// WRONG: return false does nothing in addEventListener
form.addEventListener("submit", () => {
  return false; // Form still submits!
});
 
// CORRECT: Use preventDefault
form.addEventListener("submit", (e) => {
  e.preventDefault();
});

// WRONG: Preventing click does not stop form submission
submitButton.addEventListener("click", (e) => {
  e.preventDefault(); // Stops the click, but form can still submit via Enter!
});
 
// CORRECT: Prevent submit on the form element
form.addEventListener("submit", (e) => {
  e.preventDefault(); // Catches both button clicks AND Enter key
});

// WRONG: passive: true means you cannot call preventDefault
document.addEventListener("touchstart", (e) => {
  e.preventDefault(); // Ignored! Browser logs a warning
}, { passive: true });
 
// CORRECT: Omit passive or set it to false
document.addEventListener("touchstart", (e) => {
  e.preventDefault(); // Works
}, { passive: false });

function enhanceForm(formId) {
  const form = document.getElementById(formId);
  const submitBtn = form.querySelector('[type="submit"]');
 
  const validators = {
    email: (value) => {
      if (!value) return "Email is required";
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return "Invalid email format";
      return null;
    },
    password: (value) => {
      if (!value) return "Password is required";
      if (value.length < 8) return "Password must be at least 8 characters";
      if (!/[A-Z]/.test(value)) return "Password needs an uppercase letter";
      if (!/[0-9]/.test(value)) return "Password needs a number";
      return null;
    },
    name: (value) => {
      if (!value.trim()) return "Name is required";
      if (value.trim().length < 2) return "Name must be at least 2 characters";
      return null;
    }
  };
 
  function validateField(input) {
    const name = input.name;
    const validator = validators[name];
    if (!validator) return null;
 
    const error = validator(input.value);
    const errorEl = input.parentElement.querySelector(".field-error");
    
    if (error) {
      input.classList.add("invalid");
      input.classList.remove("valid");
      if (errorEl) errorEl.textContent = error;
    } else {
      input.classList.remove("invalid");
      input.classList.add("valid");
      if (errorEl) errorEl.textContent = "";
    }
 
    return error;
  }
 
  // Validate on blur
  form.addEventListener("focusout", (e) => {
    if (e.target.matches("input, textarea, select")) {
      validateField(e.target);
    }
  });
 
  // Prevent annoying validation while typing, but clear errors
  form.addEventListener("input", (e) => {
    if (e.target.classList.contains("invalid")) {
      validateField(e.target);
    }
  });
 
  // Prevent default submission and validate all fields
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
 
    const inputs = form.querySelectorAll("input, textarea, select");
    let hasErrors = false;
 
    inputs.forEach(input => {
      const error = validateField(input);
      if (error) hasErrors = true;
    });
 
    if (hasErrors) {
      const firstInvalid = form.querySelector(".invalid");
      firstInvalid?.focus();
      return;
    }
 
    // All valid: submit
    submitBtn.disabled = true;
    submitBtn.textContent = "Submitting...";
 
    try {
      const formData = new FormData(form);
      const response = await fetch(form.action, {
        method: "POST",
        body: formData
      });
 
      if (response.ok) {
        form.reset();
        form.querySelectorAll(".valid").forEach(el => el.classList.remove("valid"));
        showSuccess("Form submitted successfully!");
      } else {
        showError("Submission failed. Please try again.");
      }
    } catch (err) {
      showError("Network error. Please check your connection.");
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = "Submit";
    }
  });
 
  // Prevent accidental page leave with unsaved changes
  let formDirty = false;
  form.addEventListener("input", () => { formDirty = true; });
 
  window.addEventListener("beforeunload", (e) => {
    if (formDirty) {
      e.preventDefault();
      // Modern browsers show a generic message
    }
  });
}
 
enhanceForm("signup-form");