user3318489 user3318489 - 1 year ago 99
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download