个人中心
gpt4 book ai didi

javascript - 启动 JQuery 旋钮时防止网站滚动

转载 作者：行者123 更新时间：2023-11-29 11:00:26 25 4
gpt4 key购买 nike

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

JQuery Knob 元素可以通过将光标放在旋钮上并启动滚轮来启动。但是，问题在于，当您这样做时，不仅旋钮的值会发生变化，而且文档本身也会滚动，因此当您尝试使用滚轮(或触控板，或触摸屏，...)。

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

这是网站的 (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>

而这些就是网站引用的js/test.js文件的内容。 
/*
 * 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);

JavaScript 代码用大量盲文填充站点，并将输入元素转换为 JQuery 旋钮。在浏览器中加载站点(我使用 Firefox 对其进行了测试，但我不怀疑该问题是特定于浏览器的)，向下滚动到旋钮，将光标放在旋钮上并启动滚轮。你会看到滚轮事件发生变化 两者 旋钮值 和 滚动文档。

为了防止在用户将光标放在旋钮上时启动滚轮时文档滚动，我尝试在 JQuery 旋钮周围的 DIV 元素上注册一个事件处理程序，它捕获 onwheel事件。为了实现这一点，我只是将以下代码插入到 init() 的主体中。功能在最后。 
    var paramDiv = $('.param').get(0);

    /*
     * Prevent site from scrolling when knob is actuated.
     */
    paramDiv.onwheel = function(event) {
        event.preventDefault();
    }

(我刚刚意识到 StackOverflow 上的语法高亮显示 event 作为 JavaScript 关键字。但是，无论参数命名为 event 还是 e 或其他名称，行为似乎没有区别。)

这确实可以防止在将光标放置在旋钮(或者更确切地说，包含它的 DIV)上的同时启动鼠标滚轮时文档滚动。然而，它也阻止了鼠标滚轮本身启动旋钮，这违背了整个目的。

我不明白为什么在周围的 DIV 捕获事件会阻止使用滚轮启动旋钮。据我了解，事件“沿着 DOM 树”传播，从子节点到父节点。所以旋钮(或它所包含的 DOM 元素)应该获得鼠标滚轮事件 第一 ，导致旋钮被轮子驱动。然后，我希望事件在 DOM 树中“向上”(朝向父节点)传播，以便它最终被周围 DIV 上的事件处理程序捕获，从而防止文档被滚动。

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

我想要实现的行为如下:
  • 将光标置于旋钮上时启动滚轮 只有启动相应的旋钮但不做 不是 滚动文档。
  • 当光标位于 时启动滚轮不是 放在旋钮上会滚动文档。

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

    任何帮助表示赞赏。

    最佳答案

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

    找到以下行(GitHub 上原始源代码中的 671 和 672)。

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

    将它们更改为以下内容。 
    this.$c.bind("wheel mousewheel DOMMouseScroll", mw);
    this.$.bind("wheel mousewheel DOMMouseScroll", mw);

    然后，找到以下行(GitHub 上原始源中的 572 和 573)。 
    deltaX = ori.detail || ori.wheelDeltaX,
    deltaY = ori.detail || ori.wheelDeltaY,

    将它们更改为以下内容。 
    deltaX = ori.deltaX || ori.detail || ori.wheelDeltaX,
    deltaY = ori.deltaY || ori.detail || ori.wheelDeltaY,

    现在，滚动事件由 JQuery 旋钮正确捕获，因此在启动旋钮时文档不再滚动。

    编辑: 2018 年 3 月，我同时发布了 a patch to JQuery Knob ，它解决了这个问题和其他几个问题，以及 a clean-room implementation of a JavaScript knob ，具有更直接的架构，不依赖于 JQuery(或任何其他外部库)。如果您遇到 JQuery Knob 的问题，您可能需要考虑使用其中之一。

    关于javascript - 启动 JQuery 旋钮时防止网站滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48097579/

    25 4 0
    文章推荐： javascript - 对表单使用 Reset() 函数返回 "property of undefined"
    文章推荐： Javascript ImageData 绘图缩放不正确
    文章推荐： mysql - 向汇总添加枢轴
    文章推荐： php - 通过PHP解析不完整字符串的json
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com