title: Chrome Click Event Handler Not Firing, Starts working again when I modify unrelated html
body: <p>This one is extremely weird and I'm not sure if I can even figure out how to reproduce it.</p>
  <p>I have a <code>div</code> element with two children, a <code>p</code> element and an <code>i</code> element. The <code>div</code> element has a &quot;click&quot; event listener bound to it shortly after the page loads. This click event fires as expected when chrome is in it's regular mode on my desktop. When I turn on the dev tools and go to &quot;responsive&quot; mode (the one where the touch input emulation happens), the click event stops firing when I click on the <code>p</code> or the <code>i</code>. It still fires if I click on the <code>div</code> in spots where the <code>div</code> isn't occluded by the <code>p</code> or the <code>i</code>. I opened the &quot;event listeners&quot; tab in the dev tools and ensured that the event listener was bound and enabled on the <code>div</code> and that it showed up when &quot;ancestors&quot; was checked and I was inspecting the <code>p</code> and the <code>i</code>. I also text searched my entire project to ensure that I wasn't somehow calling preventDefault or stopPropagation.</p>
  <p>This is where it gets weirder. I spent about 10 minutes trying my hardest to find any way that my code could somehow be causing it. I found absolutely nothing. I then decided to make another, very similar element further down in the page. I made a <code>div</code> with a <code>p</code> in it. As soon as I did this and reloaded the page, the problem stopped happening altogether. I had reloaded the page and done a hard reload at least 20 times before this. The problem only went away when I added this other element to the page. I then removed this other element from the page and ensured that all my code was exactly the same as before I added it. I reloaded the page and the problem was still absent.</p>
  <p>As far as I can tell, adding the unrelated element to the page fixed the issue, but I couldn't even recreate the issue after that with exactly the same code.</p>
  <p>Now I am concerned that something about the way my project is setup is causing a weird bug in the rendering engine to manifest itself seemingly at random. I'm worried that this will show up in production and get missed in testing because this bug just seems to appear and disappear regardless of my code and because I can't even reproduce it now.</p>
  <p>I realize that this is a shot in the dark, but does anyone have a suggestion as to how I reproduce this bug? I'd like to report it so it can get fixed.</p>
  <p>Here's the relevant part of my code. Not that it will help, since I can't reproduce it this way.</p>
  <pre class="lang-js prettyprint-override"><code>// Irrelevant setup stuff
  ...
  
  // Here, &quot;root&quot; is the div element in the html below that matches &quot;div.bui-dropdown&quot;
  root.addEventListener(&quot;click&quot;, function (e) {
      console.log(&quot;clicked&quot;); // I checked the console while trying to debug this and it never got here.
      root.dropdown.open();
  });
  
  ...
  // More irrelevant setup stuff.
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;bui-dropdown&quot;&gt;
      &lt;p class=&quot;bui-dropdown-label&quot;&gt;Item 01&lt;/p&gt;
      &lt;i class=&quot;material-icons&quot;&gt;arrow_drop_down&lt;/i&gt;
  
      &lt;!-- This div has display:none --&gt;
      &lt;div class=&quot;bui-dropdown-content hide&quot; scroll-stop&gt;
          &lt;p class=&quot;bui-dropdown-item&quot; value=&quot;Item 01&quot; no-close&gt;
              Item 01 (Doesn't Close Dropdown)
          &lt;/p&gt;
          &lt;p class=&quot;bui-dropdown-item&quot; value=&quot;Item 02&quot;&gt;
              Item 02
          &lt;/p&gt;
          &lt;p class=&quot;bui-dropdown-item&quot; value=&quot;Item 03&quot;&gt;
              Item 03
          &lt;/p&gt;
          &lt;p class=&quot;bui-dropdown-item&quot;&gt;
              Item 04 (Doesn't Set Label)
          &lt;/p&gt;
          &lt;p class=&quot;bui-dropdown-item&quot; value=&quot;Item 05&quot;&gt;
              Item 05
          &lt;/p&gt;
          &lt;p class=&quot;bui-dropdown-item&quot; value=&quot;Item 06&quot;&gt;
              Item 06
          &lt;/p&gt;
          &lt;p class=&quot;bui-dropdown-item&quot; value=&quot;Item 07&quot;&gt;
              Item 07
          &lt;/p&gt;
          &lt;p class=&quot;bui-dropdown-item&quot; value=&quot;Item 08&quot;&gt;
              Item 08
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>There is no other event handling code except for a window resize handler about 100 lines later. There are no calls to preventDefault or stopPropagation anywhere.</p>