Disable Mousewheel on jQuery Knob

Question

I am trying to disable the mousewheel, but still allow it to be draggable/adjustable. You can set the knob to readOnly: true, but that won't let you drag the dial. Any ideas?

$(".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;
});

Did you try to use `event.preventDefault()` in your mousewheel listener? — Ronni Egeriis Persson, Sep 24 '14 at 19:32

score 3 · Answer 1 · answered Sep 07 '16 at 10:03

read the source code of jquery-knob.js, search 'scroll',you will find this code:

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

there is no config to determine whether use scroll or not, you can comment this code to get work，but you will run into problem if your lib files are managed by bower or npm...... each time you update you lib files, you need to comment again. so another way to disable scroll is:

$(".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');

typically, the '.dial' element is a input element, you call knob method to initialize a knob, and it returns a div(in jquery element style) wraps the '.dial' element(the $ of this in source code above) and and a newly added canvas element(the $c of this in source code above),so we call children().off('mousewheel DOMMouseScroll') to remove scroll event listeners

thank you so much for this answer, it really is a work of art! should be the accepted answer — danday74, Feb 03 '22 at 12:44

score 2 · Answer 2 · answered May 04 '16 at 15:24

2

"readonly" attribute will do the trick.

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

answered May 04 '16 at 15:24

Padmanabha K.

21
3

score 0 · Answer 3 · answered Sep 24 '14 at 20:02

I found a bit of a hack for a solution - not ideal, but it works.

In the knob.js file I commented out the two lines that bind the mousewheel function (lines 669 and 670):

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

Disable Mousewheel on jQuery Knob

3 Answers3