Неверные координаты при повторном клике

Question

    zz = false;
    div.onpointerdown = div.onpointermove = e => {
        console.log( e.offsetX);
        e.type == 'pointerdown' && (zz = 2, div.setPointerCapture(e.pointerId)) // Клик по элементу
        if(zz)
            pl.style.width  = (x = (pp =  e.offsetX / div.clientWidth * 100) > 100 ? 100 : pp < 0 ? 0 : pp)+ '%';
    }

    div.onpointerup = _ => (zz = false)

  #div {
    height: 5px;
    width: 100%;
    border: 1px solid #000;
    touch-action: none;
  }
  #pl {
    position: relative;
    width: 0;
    height: 100%;
    background: red
  }
   i {
    display: block;
   touch-action: none;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: red;
    position: absolute;
    right: 0;
    transform: translate(55%, -30%);
    box-shadow: 0 0 4px rgb(0 0 0 / 41%);
    transition: 50ms all ease-in-out;
    z-index: 5;
}

<div id=div>
    <div id=pl><i></i></div>
</div>

Без блока 'i' работает. А с ним, первый раз кликаем, верно показывает offsetX. Как кликнули, не делаем движения курсора, а кликаем повторно. В данный момент он не верно показывает offsetX. В чем тут дело?

Answer 1

<style>
#div {
    height: 5px;
    width: 100%;
    border: 1px solid #000;
    touch-action: none;
    position: absolute;
    left: 15px;
}
#pl {
    position: relative;
    width: 0;
    height: 100%;
    background: red;
}
i {
    display: block;
    touch-action: none;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: red;
    position: absolute;
    right: 0;
    transform: translate(55%, -30%);
    box-shadow: 0 0 4px rgb(0 0 0 / 41%);
    transition: 50ms all ease-in-out;
    z-index: 5;
}
</style>
<div id=div>
    <div id=pl><i></i></div>
</div>
<script>
let zz = false;
const seek = e => {
    let plwidth = e.pageX - parseInt(window.getComputedStyle(div).getPropertyValue('left'));
    console.log(Math.round(plwidth));
    pl.style.width = plwidth + 'px';
}
div.onpointerdown = e => {
    zz = true;
    seek(e);
}
div.onpointerup = _ => zz = false;
div.onpointermove = e => {
    if(zz){
        seek(e);
    }
}
</script>

БЛОГ НА HUSL

Неверные координаты при повторном клике

Ответы (1 шт):