如何使用JavaScript阻止點擊事件穿透

當需要在一個元素上綁定點擊事件時，有時候會出現點擊事件穿透的情況。也就是說，當點擊該元素時，下層元素也會收到該事件。這種情況下，我們可以使用JavaScript來阻止點擊事件穿透。

一、設置元素的pointer-events屬性為none

使用CSS的pointer-events屬性可以決定一個元素是否可以被鼠標事件觸發。將該屬性設置為none時，該元素將不再觸發鼠標事件，從而可以防止點擊事件穿透。

// HTML代碼
<div class="outer">
  <div class="inner">inner</div>
</div>

// JavaScript代碼
const outer = document.querySelector('.outer');
outer.addEventListener('click', () => {
  console.log('click outer');
});
const inner = document.querySelector('.inner');
inner.addEventListener('click', () => {
  console.log('click inner');
});
// 阻止點擊事件穿透
inner.style.pointerEvents = 'none';

在上面的代碼中，點擊inner元素時，會先觸發其父元素outer的點擊事件，再觸發inner的點擊事件。但是，當把inner的pointer-events屬性設置為none時，點擊inner元素後，只會觸發inner的點擊事件。

二、使用事件對象的stopPropagation方法阻止事件冒泡

事件冒泡是指當一個元素上觸發了某個事件時，該事件會先被元素自身處理，然後冒泡到其父元素上處理。在捕獲階段，事件則從上向下傳播。可以使用事件對象的stopPropagation方法阻止事件冒泡。

// HTML代碼
<div class="outer">
  <div class="inner">inner</div>
</div>

// JavaScript代碼
const outer = document.querySelector('.outer');
outer.addEventListener('click', () => {
  console.log('click outer');
});
const inner = document.querySelector('.inner');
inner.addEventListener('click', (event) => {
  console.log('click inner');
  event.stopPropagation(); // 阻止事件冒泡
});

在上面的代碼中，當點擊inner元素時，先會觸發其自身的點擊事件，再通過事件冒泡觸發outer的點擊事件。但是，當在inner的點擊事件中調用event.stopPropagation方法時，就可以阻止事件冒泡，只會觸發inner的點擊事件。

三、使用addEventListener的第三個參數設為true阻止事件捕獲

在事件傳播過程中，還有一個捕獲階段，該階段會從文檔根節點一直向下搜索，直到找到觸發事件的那個元素。如果想要阻止事件捕獲的傳遞，可以在添加事件監聽時，將addEventListener的第三個參數設為true。

// HTML代碼
<div class="outer">
  <div class="inner">inner</div>
</div>

// JavaScript代碼
const outer = document.querySelector('.outer');
outer.addEventListener('click', () => {
  console.log('click outer');
}, true); // 第三個參數設為true
const inner = document.querySelector('.inner');
inner.addEventListener('click', () => {
  console.log('click inner');
});

在上面的代碼中，當點擊inner元素時，先會觸發其自身的點擊事件，再觸發outer的點擊事件。但是，當在添加outer的事件監聽時，將第三個參數設為true時，就可以阻止事件捕獲，只會觸發inner的點擊事件。

四、用setTimeout防止點擊事件穿透

有時候，在進行複雜的頁面操作時，可能需要在某些操作完成後才能綁定相應的點擊事件。這種情況下，可以使用setTimeout來防止點擊事件穿透。

// HTML代碼
<button id="button">Click Me</button>
<div id="modal"></div>

// JavaScript代碼
const button = document.querySelector('#button');
button.addEventListener('click', () => {
  console.log('click button');
  showModal();
});
function showModal() {
  const modal = document.querySelector('#modal');
  modal.style.display = 'block'; // 顯示模態框
  // 防止點擊事件穿透
  setTimeout(() => {
    modal.addEventListener('click', () => {
      console.log('click modal');
      modal.style.display = 'none'; // 隱藏模態框
    });
  }, 0);
}

在上面的代碼中，首先點擊button元素時，會顯示一個模態框。使用setTimeout方法將相應的點擊事件的綁定延遲到下一個事件循環中進行，就可以防止點擊事件穿透，即點擊模態框時，不會觸發下層元素的點擊事件。

五、使用jQuery阻止點擊事件穿透

除了原生JavaScript方法外，還可以使用jQuery來阻止點擊事件穿透。jQuery提供了stopPropagation和preventDefault兩種方法。

// HTML代碼
<div class="outer">
  <div class="inner">inner</div>
</div>

// JavaScript代碼
const outer = $('.outer');
outer.on('click', () => {
  console.log('click outer');
});
const inner = $('.inner');
inner.on('click', (event) => {
  console.log('click inner');
  event.stopPropagation(); // 阻止事件冒泡
  event.preventDefault(); // 阻止默認行為
});

在上面的代碼中，當點擊inner元素時，先會觸發其自身的點擊事件，而阻止事件冒泡和默認行為，則可以通過在inner的點擊事件中分別調用event.stopPropagation和event.preventDefault方法實現。

總結

在這篇文章中，我們介紹了五種阻止點擊事件穿透的方法，分別是：使用CSS的pointer-events屬性、使用事件對象的stopPropagation方法、使用addEventListener的第三個參數設為true、使用setTimeout防止點擊事件穿透和使用jQuery阻止點擊事件穿透。在實際使用中，應該根據具體情況選擇適用的方法。