JavaScript: проверьте, произошло ли событие после нажатия кнопки - PullRequest
Новая
       97

JavaScript: проверьте, произошло ли событие после нажатия кнопки

0 голосов
/ 21 октября 2018

У меня есть следующий формат таблицы 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

2) Если я нажму на кнопку, как я могу получить текст внутри первой ячейки той же строки?

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

Как уже упоминалось, вы можете использовать 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>

Я добавил еще одну отдельную строку для отображения разных журналов.

0 голосов
/ 21 октября 2018

1) вы должны рассмотреть e.target внутри function clickFunction(e)

2) вы должны выбрать прародителя этой кнопки, затем из родительского элемента выбрать первого ребенка.buttonElement.parentNode.parentNode.children[0].innerText

...