user3318489 user3318489 - 3 months ago 7
Javascript Question

javascript event of covered div element

I have a question concerning the events of a covered div element.
Do I have any chance to get the mouse click event of the covered div element with class progress-bar. Unfortunately I can not reorder the elements in that way that div container with class progress-bar is a nested element.
It would be great if there would be any solution for my problem.

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


If I remove the div container with 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>


than it works like it should concerning the mouse click event but I need this twelve span containers absolutely.
So my aim is to get the mouse click event of div container with class progress-bar with this html structure.

My JSFiddle testexample

Answer

You can actually solve this with CSS. Use pointer-events:none; on .personalHourFieldWrapper. The only downfall is that you'll lose any click events on that div. There may also be some issues depending on browser. Demo tested on Chrome and Edge.