<div>元素是HTML中的一個常用的標簽，用于將文檔分割成不同的區塊，可以應用不同的樣式或添加特定的功能。在一個HTML文檔中，可能會出現多個嵌套的<div>元素。當在一個嵌套的結構中，一個事件被觸發時，該事件會沿著DOM樹向上傳播，直到到達文檔根節點。在某些情況下，我們可能想要阻止事件冒泡，即停止事件沿著DOM樹繼續向上傳播。在這篇文章中，我們將重點討論如何使用<div>元素停止冒泡。

，我們看一個簡單的示例。下面的代碼展示了一個包含兩個<div>元素的HTML文檔：

<div id="outer">
<div id="inner">
<p>內部<div>元素</div></p>
</div>
</div>

現在，我們給這兩個<div>元素分別添加一個點擊事件處理器，并嘗試輸出它們的id，如下所示：

<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
<br>
  outer.addEventListener('click', function(event) {
console.log('外部div的id：' + event.target.id);
});
<br>
  inner.addEventListener('click', function(event) {
console.log('內部div的id：' + event.target.id);
});
</script>

當我們在頁面上點擊內部的<div>元素時，控制臺將輸出以下內容：

內部div的id：inner
外部div的id：inner

我們可以看到，事件繼續冒泡到了外部的<div>元素。但是，如果我們想要阻止事件冒泡，可以使用事件對象的stopPropagation()方法，如下所示：

<script>
inner.addEventListener('click', function(event) {
event.stopPropagation();
console.log('內部div的id：' + event.target.id);
});
</script>

現在，當我們點擊內部的<div>元素時，控制臺僅輸出如下內容：

內部div的id：inner

可以看到，通過在內部的事件處理器中調用stopPropagation()方法，我們成功地停止了事件向上冒泡到外部的<div>元素。

除了stopPropagation()方法外，還有一種方式可以阻止冒泡，那就是使用事件對象的cancelBubble屬性。我們可以通過將cancelBubble屬性設置為true來停止事件冒泡。以下是一個示例：

<script>
inner.addEventListener('click', function(event) {
event.cancelBubble = true;
console.log('內部div的id：' + event.target.id);
});
</script>

這個例子與之前的例子類似，當我們點擊內部的<div>元素時，控制臺僅輸出如下內容：

內部div的id：inner

通過設置cancelBubble屬性為true，我們成功地停止了事件冒泡。

一下，通過使用<div>元素，我們可以在HTML文檔中創建多個嵌套的區塊。當在一個嵌套結構中觸發事件時，事件會沿著DOM樹向上冒泡。為了阻止事件冒泡，我們可以使用事件對象的stopPropagation()方法或者將cancelBubble屬性設置為true。這樣，我們可以根據需要控制事件的傳播方式。