Javascript 事件对象 ClientY 错误地为 0

Question

我写了一个滚动条，到目前为止效果很好。

这是它的工作顺序:

1. 当我点击抓手/滚动条元素时 foo.addEventListener( "mousedown",scrollObject.sbar1, false); 被触发并 sbar1()正确地具有夹具/滚动条的 event.clientY 坐标元素。

2. 我使用 foo.addEventListener( "mousemove", sbar2, false); sbar1(event) 实时获取夹具坐标幻灯片。

但是，问题是当调用 sbar2(event) 时，event.clientY 坐标始终从 0 开始。在我的逻辑中，event.clientY 坐标应与 sbar1 的事件对象坐标相同，因为它与 mousedown 事件监听器是同一元素。

为什么sbar2() mousedown事件对象(event.clientY)坐标为0？如何使事件目标对象与 sbar1() event.clientY 一样正确，以便它可以从那里开始，因为它实时获取坐标？

HTML:

<div id="portfolioScrollbar">
        <div id="scrollbarTrack"><a id="scrolla" href="#scrollbar"></a></div>
    <div id="pbody">
                      ...all the text stuff...
             </div>
     </div>

Javascript:

function start() {
    var foo = document.getElementById("scrolla");
        foo.addEventListener( "mousedown", scrollObject.sbar1, false);
        foo.addEventListener( "mouseup", removeAll, false);
        foo.addEventListener( "mouseout", removeAll, false);
    }





var scrollObject = function (event) {
         
    var current = null;
    var move = null;
    var scroll = document.getElementById("scrolla"); // THIS IS THE GRIPPER/SLIDER ELEMENT

    function sbar1(event) {
        console.log("mousedown");
        event.preventDefault();
        current = event.clientY;
        console.log(current);
        console.log("seperate");
        foo.addEventListener( "mousemove", sbar2, false);
    }

    function sbar2(event) {
//      console.log(event.clientY);
        event.preventDefault();
        move = event.clientY - current;
        
        move = Math.abs(move);
        console.log(move);
        scroll.style.top =  move + "px";

    }

    return {
        sbar1: sbar1,
            sbar2: sbar2,
    }
}();

出于我自己的学习目的，我更喜欢使用 Javascript，而不使用 jQuery。

Answer 1

弄清楚了......这是正确的坐标而不是零。与当前的差异导致它为 0...不知道如何或为什么。