使用 closest() 函數獲取正確的 DOM 元素

leo108 發布于2019-05-22 18:24 / 806人閱讀

摘要：保證點擊的元素是可以切換開關狀態的獲取元素內容切換內容的開啟關閉狀態方法會觸發一個函數，這個函數會檢查二級菜單是否有類。


原文地址：Using closest() to return the correct DOM element
原文作者：Matt Smith
譯文出自：掘金翻譯計劃
本文永久鏈接：github.com/xitu/gold-m…
譯者：LucaslEliane
校對者：ZYuMing，Moonliujk

使用 closest() 函數獲取正確的 DOM 元素

最近我在使用垂直導航組件的時候遇到了一個問題：點擊菜單項的時候，對應的 JavaScript 代碼并沒有觸發。我對這個問題進行了比較深入的了解之后，分享下解決這個問題的過程以及在這過程中發現的技巧。

這個問題的場景是這樣的，所有的菜單項都有兩個子元素：一個圖標，以及一個作為標簽的元素，這兩個元素均嵌入到了鏈接中。

<li>
  <a href="#example" class="toggle">
    <img src="/img/billing.svg" width="20" height="20" alt="">
    <span>Billingspan>
  a>
  <div id="example">
    <ul>
      <li><a href="/statment/">My Statementa>li>
      <li><a href="/history/">Pay Historya>li>
    ul>
  div>
li>

在

元素中還有二級菜單，我添加了一些 JavaScript 來控制二級菜單的開啟/關閉狀態。

document.addEventListener("click", function (event) {

  // 保證點擊的元素是可以切換開關狀態的
  if (!event.target.classList.contains("toggle")) {
    return;
  }
  event.preventDefault();

  // 獲取元素內容
  var content = document.querySelector(event.target.hash);
  if (!content) {
    return;
  }

  // 切換內容的開啟/關閉狀態
  toggle(content);

}, false);

toggle 方法會觸發一個函數，這個函數會檢查二級菜單是否有 .is-visible CSS 類。如果元素具有這個類，那么二級菜單將會被隱藏，否則會顯示二級菜單：

var toggle = function (elem, timing) {

  // 如果二級菜單是可見的，那么就隱藏它
  if (elem.classList.contains("is-visible")) {
    hide(elem);
    return;
  }

  // 否則，展示二級菜單
  show(elem);
};

我希望點擊菜單項中的任何位置，都會觸發 JavaScript 并且執行切換操作。但是如果我點擊圖標或者標簽子元素，JavaScript 就不會執行。原因是 event.target 返回到的是實際點擊到的 DOM 元素。點擊圖標或者標簽只會返回圖標或者標簽元素。

closest() 方法

我需要獲取到觸發了點擊事件的目標，并且返回其父元素，而不是子元素。我采用了使用 closest() 方法的解決方案。這個方法會從當前元素開始，遍歷 DOM 樹，并且返回和給定參數匹配的最近的祖先：

let closestElement = Element.closest(selector);

這段代碼讓我醍醐灌頂。我可以通過 closest() 和 event.target 來找到并且返回父元素（菜單項鏈接），無論我點擊的是哪個子元素（圖標或者標簽）：

if (!event.target.closest("a").classList.contains("toggle")) {
  return;
}

var content = document.querySelector(event.target.closest("a").hash);

現在，點擊菜單項的任何地方都會觸發 JavaScript 并且切換二級菜單了。

可以在 CODEPEN 上嘗試一下，并且還有源碼。

希望這個小竅門可以幫助你定位特定的 DOM 元素。closest() 方法在大多數主流瀏覽器上都是支持的，但是在 IE11 上需要引入 polyfill。

如果你需要更加深入的了解本文相關的內容，我推薦 Zell Liew 的關于遍歷 DOM 元素的文章。他介紹了本文使用的這種方法以及其他一些值得一試的技巧。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到掘金翻譯計劃對譯文進行修改并 PR，也可獲得相應獎勵積分。文章開頭的 本文永久鏈接 即為本文在 GitHub 上的 MarkDown 鏈接。

掘金翻譯計劃是一個翻譯優質互聯網技術文章的社區，文章來源為掘金上的英文分享文章。內容覆蓋 Android、iOS、前端、后端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注掘金翻譯計劃、官方微博、知乎專欄。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6828.html

原生js替換jQuery各種方法-中文版

摘要：本項目總結了大部分替代的方法，暫時只支持以上瀏覽器。返回指定元素及其后代的文本內容。從服務器讀取數據并替換匹配元素的內容。用它自己的方式處理，原生遵循標準實現了最小來處理。當全部被解決時返回，當任一被拒絕時拒絕。是創建的一種方式。原文https://github.com/nefe/You-D... You Dont Need jQuery showImg(https://segmen...

lylwyy2016 2019-08-23 12:14 評論0 收藏0
jQuery基礎（二）DOM篇

摘要：將匹配元素集合的父級元素刪除，保留自身和兄弟元素，如果存在在原來的位置。方法查找指定元素集合中每一個元素的同輩元素。每次回調函數執行時，會傳遞當前循環次數作為參數從開始計數。 DOM節點的創建先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問題）創建流程比較簡單，大體如下：創建節點(常見的：元素、屬性和文本) 添加節點的一些屬性加入到文檔中流程中涉及的一...

Harpsichord1207 2019-08-22 10:42 評論0 收藏0
jQuery DOM節點的遍歷

摘要：只要符合，不管是兒子輩，孫子輩都可以與其他的樹遍歷方法不同，選擇器表達式對于是必需的參數。方法以選定的元素為中心，往內查找可以通過方法。要一個一個給合集中每一個設置顏色，這里方法就是方法就是一個循環的迭代器，它會迭代對象合集中的每一個元素。 children()方法 jQuery是一個合集對象，如果想快速查找合集里面的第一級子元素，此時可以用children()方法。這里需要注意：.c...

Elle 2019-08-21 11:56 評論0 收藏0
closest() 方法獲得匹配選擇器的第一個祖先元素

摘要：當被最接近的列表元素或其子后代元素被點擊時，會切換黃色背景定義和用法方法獲得匹配選擇器的第一個祖先元素，從當前元素開始沿樹向上。詳細說明如果給定表示元素集合的對象，方法允許我們檢索樹中的這些元素以及它們的祖先元素，并用匹配元素構造新的對象。 w3c: http://www.w3school.com.cn/jquery/traversing_closest.asp 本例演示如何通過 c...

seanlook 2019-08-23 17:00 評論0 收藏0
JSLite 與jQuery有著類似的api，模仿jQuery的語法規范，并不是100%的覆蓋【官方

摘要：與有著絕大部分類似的，通用庫只有，手機上每一都是錢。目前及的最新版已經支持。在這個函數中，原來的對象是無效的。與方法相同，接受一個標準格式的字符串，并返回解析后的對象。這有點像，但是是相反的方式。 [JSLite.io] showImg(https://img.shields.io/github/issues/JSLite/JSLite.svg); showImg(https://im...

Kyxy 2019-08-21 10:24 評論0 收藏0