在jQuery旋钮上禁用鼠标滚轮

Question

有可能吗？ 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;
});

Answer 1

“只读”属性可以解决问题。

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

Answer 2

阅读jquery-knob.js的源代码，搜索“滚动”，您将找到以下代码：

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上面的源代码中the $ of this ）以及一个新添加的canvas元素（上面的源代码中the $c of this ），因此我们调用children().off('mousewheel DOMMouseScroll')来移除滚动事件监听器

Answer 3

我发现了一些解决方案的技巧-虽然不理想，但它确实可行。

在toggle.js文件中，我注释了绑定mousewheel函数的两行（行669和670）：

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