JavaScript >> Javascript 文檔 >  >> JavaScript

如何防止 JavaScript 中事件的默認操作

為了防止事件的默認動作,你可以調用 Event.preventDefault() 方法。如果可以取消,此方法將取消該事件:

Event.preventDefault();

注意 preventDefault() 方法不會阻止事件通過 DOM 進一步傳播。要顯式停止事件傳播,請使用 stopPropagation() 事件處理程序中的方法。

假設您有以下 HTML 代碼片段:

<form action="/signup" method="GET" id="forms">
    <button id="signup" type="submit">Sign Up</button>
</form>

當您單擊按鈕時,HTML <form> 已提交。

要阻止按鈕提交表單,只需調用 preventDefault() 按鈕事件處理程序中的方法:

const btn = document.querySelector('#signup');

btn.addEventListener('click', (e) => {
    e.preventDefault();

    alert('Unable to submit the form.');
});

Event.preventDefault() 該方法適用於所有現代瀏覽器,以及 IE9 及更高版本。


Tutorial JavaScript 教程
  1. 如何在 JavaScript 中避免 if else

  2. 從頭開始 React.js

  3. 比較 JavaScript 中的對像數組

  4. React 自定義鉤子分頁“數據”未定義

  5. 發現一流功能的力量

  6. 我正在使用引導程序,除工具提示外一切正常

  7. 啟動和停止駱駝!如何創建一個非自動播放的 GIF 網絡組件🎞️🛑🔥

  1. 🎤 發布 - 技術播客 🎤 🎧 📹 面向世界!用❤️在德國柏林製造🇩🇪(附宣傳片)

  2. NKN SDK:在沒有服務器的情況下支持客戶端通信

  3. 如何使用您的節點程序發送手冊頁

  4. 使用 Context API 響應全局狀態管理(沒有 Redux)

  5. Script17 JavaScript 大會

  6. Gabut 模式開啟:製作登機清單申請(第 5 部分 - 閱讀項目)

  7. 如何將 id 參數傳遞給子路由?

  1. 動畫 CSS3 照片堆棧

  2. 在 JavaScript 中調用另一個函數中定義的函數 |例子

  3. 函數式編程之美

  4. 如何使用 Fastify 啟動和運行