在前端開發中，我們經常使用<div>標簽來定義網頁的布局。這個標簽擁有很強的靈活性，可以用來包裹其他標簽，并通過設置不同的樣式屬性來實現各種布局效果。然而，有時候我們會碰到一個問題，就是<div>標簽會“占據”頁面中的事件。這意味著當鼠標移動到<div>標簽之上，或者點擊<div>標簽時，<div>標簽上的事件會優先觸發，而不會傳遞給其內部的元素。這在某些特定的場景下會給我們帶來麻煩。

為了解決這個問題，我們可以利用一些技巧來讓<div>標簽不再“占據”事件。下面我將通過幾個代碼案例詳細說明。

案例1：點擊按鈕時觸發事件

<code>
<div onclick="event.stopPropagation()">
<button onclick="alert('Button clicked!')">Click me</button>
</div>
</code>

在這個案例中，我們有一個包裹在<div>標簽內的<button>標簽。當我們點擊按鈕時，希望觸發按鈕的點擊事件，而不是<div>標簽的點擊事件。為了實現這個效果，我們在<div>標簽上使用了event.stopPropagation()方法。這個方法可以阻止事件冒泡，即不再將事件傳遞給父級元素。所以點擊按鈕時，只會觸發按鈕的點擊事件。

案例2：鼠標移入時顯示提示信息

<code>
<div onmouseover="showTooltip('Hello, world!')" onmouseout="hideTooltip()">
Hover over me
</div>
<br>
    <script>
function showTooltip(message) {
// 在頁面中創建提示框并顯示消息
}
<br>
    function hideTooltip() {
// 隱藏提示框
}
</script>
</code>

這個案例中，我們希望當鼠標移入<div>標簽時顯示一個提示信息，并在鼠標移出時隱藏提示信息。我們可以在<div>標簽上使用onmouseover和onmouseout事件來實現這個功能。在對應的事件處理函數中，我們可以調用自定義的函數來實現相應的邏輯。這樣，鼠標在<div>標簽上移動時，提示信息會顯示出來；當鼠標移出<div>標簽時，提示信息會隱藏。

案例3：在<div>標簽內滾動時觸發事件

<code>
<style>
.container {
height: 200px;
overflow: auto;
}
</style>
<br>
    <div class="container" onscroll="handleScroll()">
<!-- 在這里放置滾動內容 -->
</div>
<br>
    <script>
function handleScroll() {
// 處理滾動事件
}
</script>
</code>

在這個案例中，我們希望在<div>標簽內滾動時觸發一個事件。為了實現這個功能，我們需要為<div>標簽設置合適的樣式屬性，使其能夠顯示滾動條。然后，我們可以在<div>標簽上使用onscroll事件來監聽滾動事件，并調用相應的事件處理函數。在事件處理函數中，我們可以處理滾動事件的邏輯，例如滾動到一定位置時加載更多內容。

以上就是幾個關于<div>不占事件的代碼案例，它們展示了如何通過簡單的技巧來實現我們期望的效果。在實際開發中，我們可以根據具體的需求和場景，靈活運用這些技巧來解決<div>標簽占據事件的問題。