Javascript 覆盖 div 元素的事件

Question

我对覆盖的 div 元素的事件有疑问。我是否有机会使用 class progress-bar 获取被覆盖的 div 元素的鼠标单击事件。不幸的是，我无法以 div 带有 class progress-bar 的容器是嵌套元素的方式对元素进行重新排序。如果我的问题有任何解决方案，那就太好了。

<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>

关于鼠标单击事件，它的工作方式与它应该的一样，但我绝对需要这十二个跨度容器。所以我的目标是用classprogress-bar和这个html结构div容器获取鼠标点击事件。

My JSFiddle testexample

Answer 1

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

Javascript 覆盖 div 元素的事件

Javascript event of covered div element

javascript

dom-events