# 使用 closest 解決只能選到目標子層的複雜結構

簡單來說，就是取得最近的目標

### 使用時機
當在複雜 HTML 結構中 **`想透過 e.target 選取某個 Element` ，卻都只能選到它的子層**時，可以透過 closest 去取到自己想要的 Element。

### 透過 closest 的方法，取得自己想要的父層 Element
寫法：

e.target.closest("想要選取的標籤名稱")
// 會從選擇的標籤整個抓取

範例：使用監聽取得 li 標籤
> 點擊的範圍如果是 ul ，因為標籤監聽從 li 開始抓取，所以會回傳 null

<iframe height="300" style="width: 100%;" scrolling="no" title="closest取得自己想要的父層 Element " src="https://codepen.io/unayo/embed/zYzKMZa?default-tab=js&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/zYzKMZa">
closest取得自己想要的父層 Element </a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

###### tags: `JS`
{%hackmd @unayojanni/H1Qq0uKkK %}