Click listener not triggering when previous sibling has z-index-CodePudding

I have a table which consists of a sticky first column and then a number of additional columns which contain input fields. Each field has a sort of floating toolbar that should appear when the input element has focus. It looks roughly like this:

let elements = document.getElementsByClassName('toolbar');
for (var i = 0; i < elements.length; i  ) {
  elements[i].addEventListener('click', function() {
    alert('clicked');
  });
}

td {
  position: relative;
}

.sticky {
  position: sticky;
  left: 0;
  background-color: white;
  z-index: 1;
  white-space: nowrap
}

.toolbar {
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 20px;
  opacity: 0;
  background-color: red;
}

input:focus .toolbar {
  opacity: 1;
  z-index: 2;
  cursor: pointer;
}

<table>
  <tr>
    <td >Lorem Ipsum</td>
    <td>
      <input>
      <div ></div>
    </td>
    <td>
      <input>
      <div ></div>
    </td>
    <td>
      <input>
      <div ></div>
    </td>
  </tr>
</table>

(I'm not 100% sure if I inserted it right into this snippets feature, if it doesn't work, just save it to a local file and run it there)

As you can see, the showing/hiding of the floating toolbar element works as expected. It is shown for all columns at the expected position when the field has focus. Now here is the thing I don't understand: The toolbar's click listener works for all columns, except for the first one (i.e. the one next to the sticky column). When I click that one, the toolbar just disappears (because the input lost focus), but the click listener is not run.

The problem disappears when I remove the z-index from the first column, but I can't, because it needs to be there for sticky to work properly. Also, if this was only a z-index problem, shouldn't the toolbar be below the sticky td?

It almost seems that what happens is:

click on the toolbar triggers loss of focus on input
loss of focus on input causes .toolbar to go below .sticky
the browser now decides for some reason that the element you clicked was not actually clickable and doesn't run the event handler

I have reproduced this in FF and Chrome, but I don't understand if it is some kind of a browser bug or is it me not understanding the event model well enough. Does anyone have some insights or links to relevant documentation?

CodePudding user response：

Add z-index: 2 to .toolbar and it will be fixed.

At the moment the other clicks work because the other columns have no z-index. When you added z-index: 1 to the column the result was that the column was shown over the toolbar. Now, since you cannot remove that z-index what makes sense is to give an increased z-index to what you would like to be shown on top of the column, in this case the toolbar.

CodePudding user response：

I think you can just add pointer-events: none to the sticky element and that should the job.