Using event.preventDefault() in a non-existent event

If you’re trying to use event.preventDefault() but getting an error because the event doesn’t exist, there are a few possible causes and solutions:

Common Issues & Fixes:

1. You’re calling it outside an event handler

   // ❌ Wrong - no event exists here
   event.preventDefault(); // Error: "event is not defined"

Fix: Only use it inside an event callback:

   button.addEventListener('click', (event) => {
     event.preventDefault(); // ✅ Works
   });

2. You forgot to pass the event parameter

   // ❌ Missing event parameter
   function handleClick() {
     event.preventDefault(); // Error: "event is not defined"
   }

Fix: Explicitly pass the event:

   function handleClick(event) { // ✅ Correct
     event.preventDefault();
   }

3. Using it in React without synthetic event

   // ❌ Wrong in React (unless using native event)
   function Component() {
     event.preventDefault(); // Error
     return <button>Click</button>;
   }

Fix: Use it in a React event handler:

   function Component() {
     const handleClick = (event) => { // ✅ React synthetic event
       event.preventDefault();
     };
     return <button onClick={handleClick}>Click</button>;
   }

4. Trying to preventDefault on a non-cancelable event

Some events (like scroll) can’t be prevented. Check with:

   if (event.cancelable) {
     event.preventDefault(); // Only works if cancelable
   }

Debugging Tips:

• Check if event exists with console.log(event)
• Verify you’re inside an event handler
• In React, ensure you’re using the synthetic event system

Alternative (if no event exists):

If you truly need to prevent default behavior without an event (like stopping form submission), control it at the source:

formElement.onsubmit = () => false; // Prevents submission