在復雜交互場景中，如何合理運用preventDefault

在復雜交互場景中，合理運用 preventDefault 可以幫助我們更好地控制和處理用戶事件

1. 阻止默認行為：在某些情況下，我們希望阻止瀏覽器的默認行為。例如，當用戶點擊一個鏈接時，我們可能希望通過 JavaScript 控制頁面的跳轉，而不是讓瀏覽器自動跳轉。這時，我們可以使用 event.preventDefault() 來阻止默認行為。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默認行為
  // 自定義處理邏輯
});

2. 阻止事件冒泡：在事件冒泡過程中，我們可能希望阻止事件繼續向上層元素傳播。這時，我們可以使用 event.stopPropagation() 或者 event.preventDefault()（取決于具體需求）來阻止事件冒泡。

document.querySelector('.child').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件冒泡
  // 或者 event.preventDefault(); 根據需求選擇
  // 自定義處理邏輯
});

3. 阻止默認行為和事件冒泡：在某些情況下，我們可能需要同時阻止默認行為和事件冒泡。這時，我們可以在事件處理函數中同時調用 event.preventDefault() 和 event.stopPropagation()。

document.querySelector('input[type="submit"]').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默認行為
  event.stopPropagation(); // 阻止事件冒泡
  // 自定義處理邏輯
});

4. 根據條件判斷：在某些情況下，我們可能只想在滿足特定條件時阻止默認行為或事件冒泡。這時，我們可以在事件處理函數中添加條件判斷。

document.querySelector('input[type="text"]').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault(); // 阻止默認行為，例如表單提交
    // 自定義處理邏輯
  }
});

總之，在復雜交互場景中，合理運用 preventDefault 可以幫助我們更好地控制和處理用戶事件。我們需要根據實際需求和場景來決定何時使用 preventDefault，以及如何使用它。