Question

我有一个关于覆盖div元素事件的问题。我是否有机会使用类 progress-bar 获取覆盖div元素的鼠标单击事件。不幸的是，我不能以这种方式对元素进行重新排序，即具有类 progress-bar 的div容器是嵌套元素。如果对我的问题有任何解决方案，那将是很好的。

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" onClick="alert('I need this event')">
    <span class="sr-only">60% Complete</span>
</div>

如果我使用 personalHourFieldWrapper 删除div容器：

<div class="personalHourFieldWrapper">
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
                    <span>&nbsp;</span>
</div>

它的工作方式应该与鼠标点击事件有关，但我绝对需要这个十二个跨度的容器。因此，我的目标是使用此html结构使用类 progress-bar 获取div容器的鼠标单击事件。

My JSFiddle testexample

Answer 1

你可以用CSS实际解决这个问题。在pointer-events:none;上使用.personalHourFieldWrapper。唯一的缺点是你将丢失该div上的任何点击事件。根据浏览器的不同，可能还会出现一些问题。 Demo在Chrome和Edge上进行了测试。

覆盖div元素的javascript事件

1 个答案: