4

有可能吗？jQuery 旋钮

我正在尝试禁用鼠标滚轮，但仍然允许它可以拖动/调整。您可以将旋钮设置为 readOnly: true，但这不会让您拖动转盘。有任何想法吗？

$(".dial").knob({
    min: 1
    max: 10
    stopper: true,
    readOnly: true,//if true This will Set the Knob readonly cannot click
    release: function (value) {
      //Do something as you release the mouse
    }
});

$(".dial").bind("mousewheel", function() {
   return false;
});
4

3 回答 3

3

阅读jquery-knob.js的源代码，搜索'scroll'，你会发现这段代码：

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

没有决定是否使用滚动的配置，你可以评论这段代码来工作，但是如果你的lib文件是由bower或npm管理的，你会遇到问题......每次更新你的lib文件，您需要再次发表评论。所以另一种禁用滚动的方法是：

$(".dial").knob({
    min: 1
    max: 10
    stopper: true,
    readOnly: true,//if true This will Set the Knob readonly cannot click
    release: function (value) {
      //Do something as you release the mouse
    }
}).children().off('mousewheel DOMMouseScroll');

通常，该'.dial'元素是一个输入元素，您调用旋钮方法来初始化一个旋钮，它返回一个div（在jquery元素样式中）包装'.dial'元素（the $ of this在上面的源代码中）和一个新添加的canvas元素（the $c of this在上面的源代码中)，所以我们调用children().off('mousewheel DOMMouseScroll')来移除滚动事件监听器

于 2016-09-07T10:03:33.523 回答
2

“readonly”属性可以解决问题。

<input type="text" class="knob" value="30" data-thickness="0.1" data-width="90" data-height="90" data-fgColor="#00a65a" readonly>

于 2016-05-04T15:24:39.363 回答
0

我发现了一些解决方案的技巧 - 不理想，但它有效。

在旋钮.js 文件中，我注释掉了绑定鼠标滚轮功能的两行（第 669 和 670 行）：

//this.$c.bind("mousewheel DOMMouseScroll", mw);
//this.$.bind("mousewheel DOMMouseScroll", mw)
于 2014-09-24T20:02:39.953 回答