JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中停止事件的傳播

為了防止事件在捕獲和冒泡階段進一步傳播,您可以調用 Event.stopPropation() 事件處理程序中的方法。

事件的傳播意味著向上冒泡到父元素或向下捕獲到子元素。

Event.stopPropation();

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

<div id="wrapper">
    <button id="signup">Sign Up</button>
</div>

當您單擊按鈕時,事件會冒泡到 <div> 元素。當你點擊按鈕時,下面的代碼會顯示兩個警報:

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

// add <div> event handler
div.addEventListener('click', (e) => {
    alert('The wrapper box was clicked!');
});

// add button event handler
btn.addEventListener('click', (e) => {
    alert('The button was clicked!');
});

阻止點擊事件傳播到 <div> 元素,你必須調用 stopPropagation() 按鈕事件處理程序中的方法:

btn.addEventListener('click', (e) => {
    e.stopPropagation();
    
    alert('The button was clicked!');
});

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


Tutorial JavaScript 教程
  1. 如何利用 JSDoc 註釋標籤使 Visual Studio Code 智能感知工作得很好

  2. Ctrl+S 防止 Chrome 中的默認設置

  3. 如何開始使用 React?

  4. JavaScript 追加到列表 |示例代碼

  5. 15分鐘讓用戶開心

  6. 倒計時器

  7. 如何在調試時或從 JavaScript 代碼中找到 DOM 節點上的事件偵聽器?

  1. 有沒有辦法在上傳反應原生之前檢查圖像大小?

  2. Show Dev:TopFeed - 按投票排序的熱門故事

  3. 你從另一個開發者那裡學到了什麼風格,你還在使用?

  4. Math.sign:如何在 JavaScript 中檢查數字是正數還是負數

  5. 加入我們的聚會並支持技術領域的少數族裔

  6. 反應渲染問題

  7. 不丟人,這是我的第一個 React 站點

  1. WebAssembly 過期了:對大型項目 JavaScript 的思考

  2. 使用 Google Cloud Run 部署 Angular 應用

  3. JavaScript 提示和技巧。

  4. 使用 Vue.js 進行身份驗證的懶惰開發人員指南