How to exclude child div from being clicked and execute the click on parent instead?

Question

I am trying to make a volume fader, and first what I need to do is to detect the height of the volume fader's container (.volume-control), on which the click happened (the whole thing is vertical).

const setVolume = (e) => {
  let offsetY = Math.round(e.clientY)
  let bottom = Math.round(e.target.getBoundingClientRect().bottom)
  let clickHeight = bottom - offsetY
  console.log((clickHeight / e.target.offsetHeight).toFixed(2))
}

<div class="volume">
  <div id="volume-control" @click="setVolume">
    <div class="volume-fader"></div>
  </div>
</div>

The fader itself is set to 30% height from bottom in css initialy, and the problem is, that when I click on it, I get its offset, and what I need is always the offset of the parent (so that I can set the fader's height respectively to where the click happened). So, how do I exclude the fader from being clicked?