简体   繁体   中英

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

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

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

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

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)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM