简单的OnClick事件不会在Android设备上触发

Question

我有一些简单的HTML显示日历，如下所示。一旦渲染日历，日历就有5或6行，相对于一个月的天数和本月第一个的一周中的几天。每天可单击单元以执行一些JavaScript。这一切都在所有桌面浏览器和iOS上都可以正常工作。但是，在所有版本的Android测试后，单击时都不会触发OnClick事件。有什么想法吗？

<div id="cal">
<div id="cal-caption">
    <span id="cal-last"><img src="/assets/images/arrow-left.png"></span>
    <span id="cal-month">May 2021</span>
    <span id="cal-next"><img src="/assets/images/arrow-right.png"></span>
</div>
<div id="cal-header">
<div class="cal-head">MON</div>
<div class="cal-head">TUE</div>
<div class="cal-head">WED</div>
<div class="cal-head">THU</div>
<div class="cal-head">FRI</div>
<div class="cal-head">SAT</div>
<div class="cal-head">SUN</div>
</div>
<div id="cal-body">
<div class="cal-row">
<div id="cl00" onclick="cal.click('cl00')"></div>
<div id="cl01" onclick="cal.click('cl01')"></div>
<div id="cl02" onclick="cal.click('cl02')"></div>
<div id="cl03" onclick="cal.click('cl03')"></div>
<div id="cl04" onclick="cal.click('cl04')"></div>
<div id="cl05" onclick="cal.click('cl05')"></div>
<div id="cl06" onclick="cal.click('cl06')"></div>
</div>
<div class="cal-row">
<div id="cl10" onclick="cal.click('cl10')"></div>
<div id="cl11" onclick="cal.click('cl11')"></div>
<div id="cl12" onclick="cal.click('cl12')"></div>
<div id="cl13" onclick="cal.click('cl13')"></div>
<div id="cl14" onclick="cal.click('cl14')"></div>
<div id="cl15" onclick="cal.click('cl15')"></div>
<div id="cl16" onclick="cal.click('cl16')"></div>
</div>
<div class="cal-row">
<div id="cl20" onclick="cal.click('cl20')"></div>
<div id="cl21" onclick="cal.click('cl21')"></div>
<div id="cl22" onclick="cal.click('cl22')"></div>
<div id="cl23" onclick="cal.click('cl23')"></div>
<div id="cl24" onclick="cal.click('cl24')"></div>
<div id="cl25" onclick="cal.click('cl25')"></div>
<div id="cl26" onclick="cal.click('cl26')"></div>
</div>
<div class="cal-row">
<div id="cl30" onclick="cal.click('cl30')"></div>
<div id="cl31" onclick="cal.click('cl31')"></div>
<div id="cl32" onclick="cal.click('cl32')"></div>
<div id="cl33" onclick="cal.click('cl33')"></div>
<div id="cl34" onclick="cal.click('cl34')"></div>
<div id="cl35" onclick="cal.click('cl35')"></div>
<div id="cl36" onclick="cal.click('cl36')"></div>
</div>
<div class="cal-row">
<div id="cl40" onclick="cal.click('cl40')"></div>
<div id="cl41" onclick="cal.click('cl41')"></div>
<div id="cl42" onclick="cal.click('cl42')"></div>
<div id="cl43" onclick="cal.click('cl43')"></div>
<div id="cl44" onclick="cal.click('cl44')"></div>
<div id="cl45" onclick="cal.click('cl45')"></div>
<div id="cl46" onclick="cal.click('cl46')"></div>
</div>
<div id="cal-extra" class="cal-row">
<div id="cl50" onclick="cal.click('cl50')"></div>
<div id="cl51" onclick="cal.click('cl51')"></div>
<div id="cl52" onclick="cal.click('cl52')"></div>
<div id="cl53" onclick="cal.click('cl53')"></div>
<div id="cl54" onclick="cal.click('cl54')"></div>
<div id="cl55" onclick="cal.click('cl55')"></div>
<div id="cl56" onclick="cal.click('cl56')"></div>
</div>
</div>
<div id="cal-footer">
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
</div>

Answer 1

HTML是Bootstrap响应式布局的一部分。该问题仅在视口狭窄时发生在Chrome中（电话尺寸）。日历位于左手6列中，右6列中有一些文本。随着页面级联和视口缩小右手的缩小，右手6列落在左侧列下方，但至关重要的是在Chrome中有一个重叠。重叠掩盖了日历的底部行。为了解决问题，我在左手列中添加了高Z索引，右侧添加了一个低的Z索引。因此，现在重叠仍会发生，但是日历位于顶部，仍然可以单击。非常感谢T.Trassoudaine将我指向正确的方向。