Javascript 音量进度条，偏移量未定义

我已经用javascript/jquery创建了一个audioplayer。桌面版运行良好，但在手机上，我无法使音量进度条可用

首先，我对播放/暂停按钮有相同的问题，但现在已经解决了

我发现offsetX似乎不适用于移动设备

我试过pageX和clientX，但没有解决这个问题

我是一个绝对的javascript新手，所以我希望有人能帮助我

function updateVolumeProgressBar(audio) {
    let volume = audio.volume * 100;
    $(".volumeBar .progress").css("width", volume + "%");
}
this.audio.addEventListener("volumechange", function() {
        updateVolumeProgressBar(this);
    });

$(".volumeBar .progressBar").on("mousedown touchstart", function() {
            mouseDown = true;
          console.log("test4");
        });

        $(".volumeBar .progressBar").on("mousemove", function(e) {
            if(mouseDown === true) {
                let percentage = e.offsetX / $(this).width();
            console.log(e.offsetX);
                if(percentage >= 0 && percentage <= 1) {
                    audioElement.audio.volume = percentage;
                }
            }
        });
$(".volumeBar .progressBar").on("mouseup", function(e) {
            let percentage = e.offsetX / $(this).width();
            if(percentage >= 0 && percentage <= 1) {
                audioElement.audio.volume = percentage;
            }
        });


        $(".volumeBar .progressBar").on("touchend", function(e) {
          var orig = e.originalEvent;
            let percentage = (orig.offsetX) / $(this).width();
          console.log(orig.offsetX);
            if(percentage >= 0 && percentage <= 1) {
                audioElement.audio.volume = percentage;
            }
        });
$(document).mouseup(function() {
            mouseDown = false;
        });

        $(document).on("touchend", function() {
            mouseDown = false;
        });

HTML部分

<div class="playbackBar">

        <span class="progressTime current">0:00</span>

        <div class="progressBar">
                <div class="progressBarBg">
                        <progress id="timeSeek" value="0" max="1"></progress>
                </div>
        </div>

        <span class="progressTime remaining">0.00</span>


</div>

0:00
0

为什么不使用滑块？作为一个示例，请参见here:、here:或here:@deblocker。问题在于带有offsetX的“seek”函数。在桌面上，它工作得很好。但在mobiler设备上，当我在进度栏中点击一个位置时，它会跳到下一个曲目。我需要的是能帮我更改搜索功能的人……在手机上，你需要处理一组触摸事件，请参见这里的

changedtouchs

：-相反，使用

滑块

你只需要跟踪

更改

事件。为什么不使用滑块？作为一个示例，请参见here:、here:或here:@deblocker。问题在于带有offsetX的“seek”函数。在桌面上，它工作得很好。但在mobiler设备上，当我在进度栏中点击一个位置时，它会跳到下一个曲目。我需要的是能帮助我更改搜索功能的人…在移动设备上，您需要处理一组触摸事件，请参见此处的

changedtouchs

：-相反，使用

滑块

只需跟踪

更改

事件即可。

<div class="playbackBar">

        <span class="progressTime current">0:00</span>

        <div class="progressBar">
                <div class="progressBarBg">
                        <progress id="timeSeek" value="0" max="1"></progress>
                </div>
        </div>

        <span class="progressTime remaining">0.00</span>


</div>