title: 'click' Event listener not working on small screen
body: <p>I have a table whose each row has an addEventlistener for click. The rows are selected fine on bigger screens, but in small screens some of the items cannot be selected.
  I am using plain JavaScript for this. I have the respective media queries defined so that should not be  a problem in my opinion.</p>
  <p>This is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var table_row = document.querySelectorAll('.table-row'); //all table rows
  window.onload = () =&gt; { //clear the localstorage from previous sessions
    localStorage.clear();
    table_row.forEach(element =&gt; {
      element.addEventListener('click', () =&gt; {
        //on click of a row
        id = element.getAttribute('data-id');
        state = element.getAttribute('data-state');
        if (state == 'off') {
          //unselected
          element.style.background = "#742173";
          element.style.color = "white";
          element.setAttribute('data-state', 'on');
  
          //changed the appearance of current element
          if (prev_element != null) {
            //revert changes to last selection
            console.log('prev_element:' + prev_element.childNodes[1].innerText);
            prev_element.style.background = "#f0efed";
            prev_element.style.color = "black";
            prev_element.setAttribute('data-state', 'off');
          }
  
          //setting current element ad prev_element
          prev_element = document.getElementById(id);
          console.log('prev_element:' + prev_element.childNodes[1].innerText);
        }
      });
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table align="center
          " id='space-table'&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;td&gt;Spacecraft name&lt;/td&gt;
        &lt;td&gt; Origin&lt;/td&gt;
        &lt;td&gt; Destination&lt;/td&gt;
        &lt;td&gt;Price per person&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
  
      &lt;tr class="table-row" id='row1' data-id="row1" data-state="off"&gt;
        &lt;td&gt;ax12&lt;/td&gt;
        &lt;td&gt;Sector 3&lt;/td&gt;
        &lt;td&gt;Sector 5A-12&lt;/td&gt;
        &lt;td&gt;450&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="table-row" id='row2' data-id="row2" data-state="off"&gt;
        &lt;td&gt;ax13&lt;/td&gt;
        &lt;td&gt;Crater34&lt;/td&gt;
        &lt;td&gt;Sector 3&lt;/td&gt;
        &lt;td&gt;145&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="table-row" id='row3' data-id="row3" data-state="off"&gt;
        &lt;td&gt;ax14&lt;/td&gt;
        &lt;td&gt;Crater 34&lt;/td&gt;
        &lt;td&gt;Sector 3A-5&lt;/td&gt;
        &lt;td&gt;250&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="table-row" id='row4' data-id="row4" data-state="off"&gt;
        &lt;td&gt;ax15&lt;/td&gt;
        &lt;td&gt;Sector 5A-12&lt;/td&gt;
        &lt;td&gt;LM-36 &lt;/td&gt;
        &lt;td&gt;125&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="table-row" id='row5' data-id="row5" data-state="off"&gt;
        &lt;td&gt;ax16&lt;/td&gt;
        &lt;td&gt;Sector 5A-12&lt;/td&gt;
        &lt;td&gt;Crater 34&lt;/td&gt;
        &lt;td&gt;210&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="table-row" id='row6' data-id="row6" data-state="off"&gt;
        &lt;td&gt;ax17&lt;/td&gt;
        &lt;td&gt;Crater 34&lt;/td&gt;
        &lt;td&gt;LM-36&lt;/td&gt;
        &lt;td&gt;500&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>