CODEWITHSUNDEEP
javascriptjquerymousewheeljquery-knob
user1791914
user1791914

Reputation: 626

Disable Mousewheel on jQuery Knob

Is is possible? jQuery Knob

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;
});

Upvotes: 4

Views: 2173

Answers (3)

fenyiwudian
fenyiwudian

Reputation: 470

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

Upvotes: 3

Padmanabha K.
Padmanabha K.

Reputation: 21

"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>

Upvotes: 2

user1791914
user1791914

Reputation: 626

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)

Upvotes: 0

Related Questions