Javascript 启动JQuery旋钮时防止网站滚动_Javascript_Jquery_Scroll

Javascript 启动JQuery旋钮时防止网站滚动

javascript jquery scroll

Javascript 启动JQuery旋钮时防止网站滚动,javascript,jquery,scroll,Javascript,Jquery,Scroll,我有一个DSP应用程序，可以通过web界面进行控制。为了允许用户设置某些数值，例如增益、灵敏度、音量、滤波器的频率限制等，我使用Anthony Therrien的JQuery旋钮元素可以通过将光标放在旋钮上并启动滚轮来启动JQuery旋钮元素。但是，问题是，当您这样做时，不仅旋钮的值会改变，而且文档本身也会滚动，以便在您尝试使用滚轮（或轨迹板或触摸屏等）更改其值时，旋钮会移到光标下方为了确保这个问题不是我的应用程序特有的，并且为我的问题提供了一个代码示例，我实现了一个小型测试站点来演示这个问

我有一个DSP应用程序，可以通过web界面进行控制。为了允许用户设置某些数值，例如增益、灵敏度、音量、滤波器的频率限制等，我使用Anthony Therrien的JQuery旋钮元素

可以通过将光标放在旋钮上并启动滚轮来启动JQuery旋钮元素。但是，问题是，当您这样做时，不仅旋钮的值会改变，而且文档本身也会滚动，以便在您尝试使用滚轮（或轨迹板或触摸屏等）更改其值时，旋钮会移到光标下方

为了确保这个问题不是我的应用程序特有的，并且为我的问题提供了一个代码示例，我实现了一个小型测试站点来演示这个问题

这是该网站的（X）HTML（5）代码

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Test page
        </title>
        <script src="js/include/jquery-3.2.1.js" type="text/javascript"></script>
        <script src="js/include/jquery.knob.js" type="text/javascript"></script>
        <script src="js/test.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="content">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
                tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim
                veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid
                ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
                velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                obcaecat cupiditat non proident, sunt in culpa qui officia deserunt
                mollit anim id est laborum.
            </div>
        </div>
        <div>
            <div class="param" style="display: inline-block">
                <input class="knob" value="50" data-min="0" data-max="100"
                    data-step="1" data-width="150" data-height="150"
                    data-angleoffset="-135" data-anglearc="270"
                    data-rotation="clockwise" data-cursor="false"
                    data-thickness=".3" data-displayprevious="true"
                    data-bgcolor="#181818" data-fgcolor="#ff8800"
                    type="text"/>
            </div>
        </div>
    </body>
</html>

/*
 * This is called after the DOM initialized.
 */
function init() {
    var contentDiv = $('#content').get(0);
    var loremDiv = contentDiv.firstChild.nextSibling;

    /*
     * Replicate the lorem ipsum a couple of times to have
     * content on the site for scrolling.
     */
    for (var i = 0; i < 16; i++) {
        var newNode = loremDiv.cloneNode(true);
        contentDiv.appendChild(newNode);
    }

    /*
     * Turn the input element into a JQuery knob.
     */
    $('.knob').knob();
}

$(init);

（我刚刚意识到StackOverflow的语法突出显示将

event

作为JavaScript关键字突出显示。但是，无论参数名是

event

还是

或其他任何名称，行为似乎都没有区别。）

这确实可以防止在光标放置在旋钮（或者更确切地说，是包含它的DIV）上时启动鼠标滚轮时文档滚动。但是，它也会阻止鼠标滚轮启动旋钮本身，从而破坏整个功能

我不明白为什么在周围的DIV捕捉事件会阻止使用滚轮启动旋钮。据我所知，事件“在DOM树上”从子节点传播到父节点。因此，旋钮（或它包含的DOM元素）应该首先获得鼠标滚轮事件，，从而使旋钮由滚轮启动。然后，我希望事件在DOM树中“向上”（向父节点）传播，以便最终被周围DIV上的事件处理程序捕获，从而防止文档被滚动

然而，事实并非如此。当我在周围的DIV上捕获鼠标滚轮事件时，当光标放在旋钮上时，这确实可以防止站点滚动。但是，它还可以防止使用鼠标滚轮启动旋钮。有人知道为什么会发生这种情况，以及如何正确处理这个问题吗

我希望实现的行为如下：

当光标放置在旋钮上时，启动滚轮只会启动相应的旋钮，但不会滚动文档
当光标未置于旋钮上时，启动滚轮可滚动文档

我有一个修改版的JQuery旋钮，我在我的特定应用程序中使用它，它解决了几个问题。（JQuery旋钮的代码目前尚未维护。存储库中的最后一次提交是在2015年12月。）但是，原始版本也会出现问题，因此，当知道适用于原始JQuery旋钮实现的修复/解决方法时，它很可能也适用于我的自定义版本

非常感谢您的帮助。

我通过再次调整JQuery旋钮代码找到了解决此问题的方法

找到以下行（GitHub上原始源代码中的671和672）

将它们更改为以下内容

this.$c.bind("wheel mousewheel DOMMouseScroll", mw);
this.$.bind("wheel mousewheel DOMMouseScroll", mw);

deltaX = ori.deltaX || ori.detail || ori.wheelDeltaX,
deltaY = ori.deltaY || ori.detail || ori.wheelDeltaY,

然后，找到以下行（GitHub上原始源代码中的572和573）

将它们更改为以下内容

this.$c.bind("wheel mousewheel DOMMouseScroll", mw);
this.$.bind("wheel mousewheel DOMMouseScroll", mw);

deltaX = ori.deltaX || ori.detail || ori.wheelDeltaX,
deltaY = ori.deltaY || ori.detail || ori.wheelDeltaY,

现在，JQuery旋钮正确地捕捉到了滚动事件，这样在启动旋钮时文档就不会再滚动了

编辑：在2018年3月，我发布了这两个版本，修复了这一问题和其他几个问题，并且采用了更直接的体系结构，不依赖于JQuery（或任何其他外部库）。如果您遇到jQuery旋钮问题，您可能需要考虑使用其中之一。

deltaX = ori.deltaX || ori.detail || ori.wheelDeltaX,
deltaY = ori.deltaY || ori.detail || ori.wheelDeltaY,