如何從javascript中的子元素獲取主父節點元素的屬性值？-有解無憂

單擊子元素時是否可以獲得屬性“data-id”？在下面的場景中，該getDataIdOfTheCurrentRow()方法僅在單擊跨度時觸發，而不是整個記錄。我需要檢索 parent 的 attr 值tr。我知道我可以設定一個在單擊“tr”時觸發的方法，這樣我就可以輕松訪問它的屬性。但這不是我要的。

 <tr data-id="1">
     <div>
          <div>
              <div id="text-wrapper">
                  <span onclick="getDataIdOfTheCurrentRow(event)">some text</span>
              </div>
          </div>
     </div>
 </tr>


function getDataIdOfTheCurrentRow(event) {
   // stopPropagation is used to only fires the method when clicking on the child element, not other methods on the parent elements
    event.stopPropagation(); 
}

uj5u.com熱心網友回復：

你可以使用closest(selector)：

function getDataIdOfTheCurrentRow(event) {
    event.stopPropagation();
    const row = event.target.closest('tr');
    if(row.hasAttribute('data-id')){
      const dataID = row.getAttribute('data-id');
      // now do your thing
    }
}

uj5u.com熱心網友回復：

a 的唯一有效父標簽<tr>是 a<table>

把所有東西都包在一個<table>
<tr>一個可以擁有的唯一子標簽是<td>和<th>

<td>直接在其中添加<tr>洗掉那些額外的<div>它們只會使您的布局混亂
不要隨意使用id，當你寫完第 100 頁并且難以覆寫樣式、添加參考 DOM 物件的 JavaScript 等時，你就會明白。

洗掉所有ids 并使用, ,等document.querySelector()來參考元素。.class[name]tagName

不要使用行內事件處理程式^?

 <div class='target' onclick="lame(this)">DON'T DO THIS</div>

使用 onevent 屬性或

document.querySelector('.target').onclick = eventHandler;

事件監聽器

document.querySelector('.target').addEventListener('click', eventHandler)

^?^{請參閱下面的有關事件的文章的鏈接}

細節在例子中注釋

顯示代碼片段

// Bind click event to an ancestor tag
document.querySelector('table').onclick = getRow;

// Event handlers only passes the Event object
function getRow(event) {
  // Reference the tag that the user clicked
  const clicked = event.target;
  // If the clicked tag is a <button>...
  if (clicked.matches('button')) {
    /*
    Find the closest parent <tr> get it's data-id value and convert it 
    into a real number
    */
    console.log(parseInt(clicked.closest('tr').dataset.id));
  }
}

.as-console-row::after {
  width: 0;
  font-size: 0;
}

.as-console-row-code {
  width: 100%;
  word-break: break-word;
}

.as-console-wrapper {
  min-height: 100% !important;
  max-width: 50%;
  margin-left: 50%;
}

<table>
  <tr data-id="1">
    <td>
      <menu>
        <button type='button'>Get row number</button>
      </menu>
    </td>
  </tr>
  <tr data-id='2'>
    <td>
      <menu>
        <button type='button'>Get row number</button>
      </menu>
    </td>
  </tr>
  <tr data-id='3'>
    <td>
      <menu>
        <button type='button'>Get row number</button>
      </menu>
    </td>
  </tr>
  <tr data-id='4'>
    <td>
      <menu>
        <button type='button'>Get row number</button>
      </menu>
    </td>
  </tr>
</table>

活動

事件委托

行內事件處理程式是垃圾

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/482959.html

標籤：javascript html

上一篇：異步函式內的異步映射函式的回應資料未定義

下一篇：嘗試從函式回傳流緩沖區