首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript:检查单击按钮后是否发生了事件

JavaScript:检查单击按钮后是否发生了事件
EN

Stack Overflow用户
提问于 2018-10-21 08:19:24
回答 2查看 1.9K关注 0票数 2

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

代码语言:javascript
复制
<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)如果我点击按钮,如何获取同一行第一个单元格内的文本?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-21 08:39:50

如前所述,您可以使用e.target来获取被单击的元素。然后,您可以组合使用found按钮的closest()cells.item()函数:

代码语言:javascript
复制
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);
代码语言:javascript
复制
<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>

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

票数 2
EN

Stack Overflow用户

发布于 2018-10-21 08:24:09

1)您应该考虑在function clickFunction(e)中使用e.target

2)您应该选择该按钮的祖父母,然后从父级中选择第一个子级。buttonElement.parentNode.parentNode.children[0].innerText

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52911124

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档