Question

我正在尝试禁用鼠标滚轮，但仍允许它可拖动/可调节。您可以将旋钮设置为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

＆＃34;只读＆＃34;属性将起作用。

＆＃13;

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

＆＃13;

Answer 2

阅读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'元素是一个输入元素，你调用knob方法初始化一个旋钮，它返回一个div（以jquery元素样式）包装'.dial'元素（{{1}在上面的源代码中）和一个新添加的canvas元素（上面的源代码中为the $ of this），所以我们调用the $c of this来删除滚动事件监听器

Answer 3

我找到了一个解决问题的方法 - 不理想，但它确实有用。

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

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

在jQuery旋钮上禁用鼠标滚轮

3 个答案: