JavaScript: 检查点击按钮后事件是否发生

Question

我有以下 HTML table 格式（仅显示许多行中的一行），在最后一个单元格上有一个按钮：

<div id=main>
      <div class='info'>
       <p>Name: <span class='x'>ABC</span></p>
       <p>Number: <span class='x'>0</span></p>
       <table class='newTable'>
        <tr>
         <th>
          Number
         </th>
         <th> 
          Value
         </th>
         <th> 
          Go
         </th>
         
       </tr>
       <tr>
         <td>
          0
         </td>
         <td>
          <span class='k'>11.7</span>
         </td>
         <td>
         <button class='go'>Go</button>
        </td>
        </tr>
       </table>
      </div>
    </div>

我有一个 eventListener (mainEntries.addEventListener('click', clickFunction))，只要在 <div id = main> ... </div>

内就会触发

我不允许更改 HTML。我有两个问题：

1) 如果我单击按钮 "GO" 或 <div id = main> ... </div>

中的某处，我如何检查 function clickFunction(e) 中的内容

***里面clickFunction(e)e是MouseEvent

2)如果我点击按钮，我怎样才能得到同一行第一个单元格内的文本？

Answer 1

1) 你应该考虑 e.target 在 function clickFunction(e)

里面

2) 你应该select那个按钮的grandparent，然后，从parent，你select第一个child。 buttonElement.parentNode.parentNode.children[0].innerText

Answer 2

如前所述，您可以使用 e.target 来获取点击的元素。然后，您可以使用找到的按钮的 closest() and cells.item() 功能组合：

const mainEntries = document.querySelector('#main');

const clickFunction = e => {
  if (e.target.tagName === 'BUTTON' && e.target.classList.contains('go')) {
    const firstCellSameRow = e.target.closest('tr').cells.item(0).innerText;
    console.log('GO button clicked. First cell\'s text at the same row is ', firstCellSameRow);
  }
  else {
    console.log('Main div clicked outside of GO button');
  }
}

mainEntries.addEventListener('click', clickFunction);

<div id=main>
     <div class='info'>
        <p>Name: <span class='x'>ABC</span></p>
        <p>Number: <span class='x'>0</span></p>
        <table class='newTable'>
            <tr>
                <th>
                    Number
                </th>
                <th>    
                    Value
                </th>
                <th>    
                    Go
                </th>

            </tr>
            <tr>
                <td>
                    0
                </td>
                <td>
                    <span class='k'>11.7</span>
                </td>
                <td>
                    <button class='go'>Go</button>
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td>
                    <span class='k'>8.5</span>
                </td>
                <td>
                    <button class='go'>Go</button>
                </td>
            </tr>
        </table>
    </div>
</div>

我添加了另一个不同的行来显示不同的日志。

JavaScript: 检查点击按钮后事件是否发生

JavaScript: Check if event occurred after clicking on a button

javascript

html

html-table

addeventlistener

htmlbutton