禁用jQuery Knob插件上的鼠标滚轮功能。

Question

这是可能的吗？jQuery Knob

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

- user1791914

---

你尝试在鼠标滚轮监听器中使用 event.preventDefault() 了吗？ - Ronni Egeriis Persson

尝试解除绑定'DOMMouseScroll'。 - nicolast

尝试了这两个方法，但仍然没有成功。 - user1791914

Answer 1

阅读jquery-knob.js源代码，搜索"scroll"，你会找到以下代码：

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

目前没有配置来决定是否使用滚动条，你可以将这段代码注释掉以使其正常工作。但是，如果您的库文件由Bower或NPM管理，则会遇到问题……每次更新库文件时，您需要再次注释掉它。 因此，禁用滚动条的另一种方法是：

$(".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'元素是一个输入元素，您可以调用旋钮方法来初始化旋钮，并返回一个包装'.dial'元素（在源代码中为this的$）和一个新添加的画布元素（在源代码中为this的$c）的div（以jquery元素样式）。因此，我们调用children().off('mousewheel DOMMouseScroll')来删除滚动事件监听器。

- fenyiwudian

---

非常感谢您的回答，真的是一件艺术品！应该接受这个答案。 - danday74

Answer 2

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

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

- Padmanabha K.

Answer 3

我找到了一个解决方案的小技巧 - 不是理想的，但它有效。

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

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

- user1791914