在启动JQuery Knob时防止网站滚动
我有一个DSP应用程序，可以通过web接口进行控制。为了允许用户设置某些数字值，如增益、灵敏度、音量、滤波器的频率限制等，我使用安东尼·塞里恩的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 Knob。在浏览器中加载站点(我使用Firefox测试了它，尽管我不怀疑这个问题是浏览器特有的)，向下滚动到旋钮，将光标放在旋钮上并启动滚动轮。您将看到滚动轮事件改变了，，，和都会滚动文档。
为了防止当用户启动滚动轮时，当光标放在旋钮上时，文档不会滚动，我尝试在JQuery knob周围的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树”从子节点传播到父节点。因此，Knob (或它所包含的DOM元素)应该首先获得鼠标轮事件()，从而使旋钮被车轮驱动。然后，我希望事件在DOM树中传播“向上”(指向父节点)，以便最终被周围DIV上的事件处理程序捕获，从而防止文档被滚动。
然而，事实并非如此。当我捕捉到周围DIV上的鼠标轮事件时，当光标被放置在旋钮上时，这确实会阻止站点滚动。然而，它的也防止旋钮被驱动使用鼠标轮。任何人都知道，为什么会发生这种情况，以及如何正确处理这个问题？
我希望做到以下几点：
- 当光标放置在一个旋钮上时，启动滚轮，只有驱动相应的旋钮，但而不是滚动文档。
- 当光标是时，启动滚动轮，而不是将放在旋钮上，滚动文档。
我有一个修改过的JQuery Knob版本，我在我的特定应用程序中使用它，它有几个问题是固定的。( JQuery Knob的代码目前未维护。存储库中最后一次提交是在2015年12月。但是，这个问题也发生在最初的版本中，因此，当知道用于原始JQuery Knob实现的修复/解决方案时，它很有可能也适用于我的自定义版本。
任何帮助都是非常感谢的。
回答 1
Stack Overflow用户
发布于 2018-01-05 18:32:52
通过再次调整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 knob正确捕获，以便文档在启动旋钮时不再滚动。
编辑：在2018年3月，我同时发布了a patch to 和其他几个问题，以及 knob，它的架构更加直接，不依赖于JQuery (或任何其他外部库)。您可能需要考虑使用其中之一，以防遇到JQuery Knob的问题。
https://stackoverflow.com/questions/48097579
复制相似问题
腾讯云开发者
