Question

I’m using some dijit.form.NumberSpinner widgets in my dojo-based application, all of them are connected to onChange actions.

A problem occurs when one has an area with lots of NumberSpinners: Users scroll across the page and accidentally fill the NumberSpinner fields with unintended values while scrolling with the mousewheel all over the area.

Is it somehow possible to disable mousewheel events on dijit.form.NumberSpinner widgets?

Answer 1

If you never need it, and if you have access to the dojo sources and are able to do your own builds, comment this line on dijit/form/_Spinner.js :

postCreate: function(){
    // [...]
    // this.connect(this.domNode, !has("mozilla") ? "onmousewheel" : 'DOMMouseScroll', "_mouseWheeled");
    // [...]
}

Alternatively, you can set the intermediateChanges property to true on your widget, and do something like this :

In your html :

<input id="spinner1" name="someNumber" data-dojo-type="dijit.form.NumberSpinner" data-dojo-props="value:'1000',smallDelta:'10',constraints:{min:9,max:1550,places:0}, intermediateChanges:'true'"/>

In your javascript block :

dojo.ready(function(){
    var spinner = dijit.byId("spinner1");
    var currentValue = spinner.get('value');
    dojo.connect(spinner, "onChange", function(value){
        currentValue = value;
    });
    dojo.connect(spinner.domNode, (!dojo.isMozilla ? "onmousewheel" : "DOMMouseScroll"), function(e){
        spinner.set('value',currentValue);
    });

});