javascript - 如何在单击按钮后检查事件是否发生

Question

我有以下 HTML 表格格式(仅显示许多行中的一行)，它在最后一个单元格上有一个按钮:

<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. 如何检查内部 function clickFunction(e)如果我点击按钮“GO”或里面的某处 <div id = main> ... </div>

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

1. 如果我点击按钮，我怎样才能在同一行的第一个单元格中获取文本？

Answer 1

如前所述，您可以使用 e.target 获取点击的元素。然后，您可以使用 closest() 的组合和 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>

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