Question

确定。我想首先道歉，因为我甚至不知道如何正确地标题这个问题。我会试着解释一下：我有一个工作代码，这种类似的工作，但它有点凌乱，所以我试图把它分成小功能。整个过程是模拟滚动条：

-div id =＆＃34;滚动条＆＃34;代表滚动条轨道 -div id =＆＃34;滚动条＆＃34;唯一的子代表滚动条拇指。

现在。每当一个＆＃34; onmousedown＆＃34;事件发生在document.documentElement中，函数checkAndPerform（e）被执行。 checkAndPerform（e）获取滚动条的边框并调用以下函数：

-checkClick（e）：它会检查滚动条内是否发生了点击并重新启动了true或false。

-perform（）：如果checkClick的结果为true，则将拇指移动到单击位置。此外，它向下滚动滚动条操作的部分（section id =＆＃34; ejercicios＆＃34;）。最后，它添加了一个＆＃34; mousemove＆＃34; EventListener到document.documentElement，附加了函数followMe（e）。此followMe函数调用一个限制滚动到轨迹栏边框的函数。之后，它执行div的翻译和部分的滚动，同时＆＃34; mousemove＆＃34;是活动的，最后调用一个函数release（），它会添加一个＆＃34; mouseup＆＃34; EventListener在释放鼠标按钮后删除followMe函数。

代码的想法来自：

How can I retrieve all mouse coordinates between mousedown to mouseup event，您可以在接受的答案中看到该函数名为＆＃34; trackPoints＆＃34;被称为无故障（就像在我之前的代码中一样）。

所以，这里有麻烦的javascript代码：

function getHeight(object) {
    var height = object.getBoundingClientRect().bottom - object.getBoundingClientRect().top;
    return height;
}

function checkClick(e) {
    console.log("x:" + e.pageX, "y:" + e.pageY);
    if (e.pageX > sBLeft - 5 && e.pageX < sBRight + 5 && e.pageY < sBBottom && e.pageY > sBTop) {
        adentroBar = true;
        console.log("meas adentro");
    } else {
        adentroBar = false;
        console.log("meas afuera");
    }
    return adentroBar;
}

function scrollLimited(e) {
    if (e.pageY < sBTop) {
        translateY = 0;
    } else if (e.pageY > sBBottom) {
        translateY = getHeight(scrollBar) - getHeight(thumb);
    } else {
        translateY = e.pageY - sBTop - .5 * getHeight(thumb);
    }
}

function followMe(e) {
    scrollLimited;
    thumb.style.transform = "translate3d(0," + translateY + "px,0)";
    document.getElementById('ejercicios').scrollTop = translateY * ratio;
    document.documentElement.addEventListener("mouseup", release, false);
}

function perform() {
    if (adentroBar === true) {
        translateY = e.pageY - sBTop - getHeight(thumb) / 2;
    }
    thumb.style.transform = "translate3d(0," + translateY + "px,0)";
    document.getElementById('ejercicios').scrollTop = translateY * ratio;
    document.documentElement.addEventListener("mousemove", followMe, false);
}

function release() {
    document.documentElement.removeEventListener("mousemove", followMe, false);
}

function checkAndPerform(e) {
    var translateY, adentroBar, scrollBar = document.getElementById('scrollbar'),
        thumb = scrollBar.getElementsByTagName("div")[0],
        sBLeft = scrollBar.getBoundingClientRect().left,
        sBRight = scrollBar.getBoundingClientRect().right,
        sBTop = scrollBar.getBoundingClientRect().top,
        sBBottom = scrollBar.getBoundingClientRect().bottom,
        preg = document.getElementById('preguntas'),
        ratio = preg.offsetHeight / (getHeight(scrollBar) - getHeight(thumb));
    if (e.which === 1) {
        checkClick;
        perform;
    }
}
document.documentElement.addEventListener("mousedown", checkAndPerform, false);

此外，这是一个jFiddle：https://jsfiddle.net/pa0exs4q/ 我可能会提供工作代码，以防你觉得它很有趣，但正如我所说，它真的很乱，并且写得很好。问题是流中的第二个函数（checkClick），甚至没有被调用。我试图将其称为（checkClick（e）），在这种情况下它运行，但无法识别上面在checkAndPerform中定义的变量。在我的工作代码中，一切都是唯一的功能，所以我认为这可能是一个范围问题，但我对任何想法持开放态度。为我的英语道歉并提前感谢！

Answer 1

如果您有一个名为myFunction的函数，则可以将其作为myFunction传递，但要实际调用它，您必须将其写为myFunction()。所以这个：

function checkAndPerform(e){
  var translateY, adentroBar, scrollBar=document.getElementById('scrollbar'), thumb=scrollBar.getElementsByTagName("div")[0], sBLeft=scrollBar.getBoundingClientRect().left, sBRight=scrollBar.getBoundingClientRect().right, sBTop=scrollBar.getBoundingClientRect().top, sBBottom=scrollBar.getBoundingClientRect().bottom, preg=document.getElementById('preguntas'), ratio=preg.offsetHeight/(getHeight(scrollBar)-getHeight(thumb));    

  if (e.which===1){
    checkClick;
    perform;
  }
}

应该成为这个：

function checkAndPerform(e){
  var translateY, adentroBar, scrollBar=document.getElementById('scrollbar'), thumb=scrollBar.getElementsByTagName("div")[0], sBLeft=scrollBar.getBoundingClientRect().left, sBRight=scrollBar.getBoundingClientRect().right, sBTop=scrollBar.getBoundingClientRect().top, sBBottom=scrollBar.getBoundingClientRect().bottom, preg=document.getElementById('preguntas'), ratio=preg.offsetHeight/(getHeight(scrollBar)-getHeight(thumb));    

  if (e.which===1){
    checkClick(e);
    perform(e); // make sure to pass e and expect it in perform, otherwise it won't have access to it
  }
}

在没有看到相应的标记的情况下，这似乎是我代码中最可能和最明显的问题。祝你好运！

在函数内部调用函数 - 麻烦：函数没有执行

1 个答案: