🔰default action

browser ⟩ event ⟩ default action

Many events have a default action associated with them.

• event handlers are usually called before the default behavior takes place.

• call event.preventDefault() to prevent this normal behavior.

// ⭐️ prevent touch screen default actions.
container.addEventListener("touchmove", event => {
        event.preventDefault();
}, {passive: false} );                 // ⭐️ important

🧨 雷區

Depending on the browser, some events can’t be intercepted at all. for example：

• Chrome：ctrl+W or cmd+W (close current tab) cannot be handled by JavaScript.

⭐️ 重點

default actions for：

• "click" on <a>：follow the link and load a new page.

• "click" on <input type="submit"> - submit the form.

• "input" on <input> - enter the input.

• "scroll" on document - the browser scrolls.

• event handlers can prevent this default action by invoking event.preventDefault(), this is sometimes called "canceling" the event.

• unless the handler is registered with the passive option, which makes preventDefault() ineffective.

👥 相關

• capturing phase

📗 參考

• Eloquent JS ⟩ Ch. 15: Event Handling ⟩ Default Actions

📘 手冊

• Event ⟩ .preventDefault()

• Element ⟩ "click" event

• HTML ⟩

  • <a>

  • <input type="submit"> - submit button