JavaScript事件覆蓋的div元素

Question

我有一個關於覆蓋的div元素事件的問題。 我是否有機會獲得覆蓋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> 

如果我刪除的div容器與personalHourFieldWrapper：

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

比它像它應該關於鼠標點擊事件，但我絕對需要這12個跨度容器。 所以我的目標是獲得帶有此html結構的類容器進度條的div容器的鼠標點擊事件。

My JSFiddle testexample

Answer 1

實際上，你可以用CSS解決這個問題。在.personalHourFieldWrapper上使用pointer-events:none;。唯一的失敗是你會失去該div上的任何點擊事件。根據瀏覽器也可能有一些問題。在Chrome和Edge上測試了Demo。