カバーされたdiv要素のjavascriptイベント

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> 

を私は絶対にこの12スパンコンテナを必要としています。 私の目的は、クラスプログレスバーとこのhtml構造のdivコンテナのマウスクリックイベントを取得することです。

My JSFiddle testexample

Answer 1

あなたが実際にCSSでこれを解決することができます。 を.personalHourFieldWrapperに使用してください。唯一の欠点は、その部門のクリックイベントを失うことです。ブラウザによってはいくつかの問題があるかもしれません。 DemoはChromeとEdgeでテスト済みです。