Как отключить события колесика мыши в виджетах dijit.form.NumberSpinner?

Я использую несколько dijit.form.NumberSpinner виджетов в своем приложении на основе додзё, все они связаны с onChange действиями.

Проблема возникает, когда есть область с большим количеством NumberSpinner: пользователи прокручивают страницу и случайно заполняют поля NumberSpinner непреднамеренными значениями, прокручивая колесиком мыши всю область.

Можно ли как-то отключить события колесика мыши на dijit.form.NumberSpinner виджетах?


person proximus    schedule 21.11.2011    source источник


Ответы (2)


Если вам это никогда не понадобится, и если у вас есть доступ к исходным кодам dojo и вы можете делать свои собственные сборки, прокомментируйте эту строку в dijit/form/_Spinner.js:

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

В качестве альтернативы вы можете установить для свойства IntermediateChanges значение true в вашем виджете и сделать что-то вроде этого:

В вашем 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'"/>

В вашем блоке javascript:

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

});
person Philippe    schedule 21.11.2011
comment
настройка исходников, как вы описали, и создание собственной сборки отлично сработали для меня, спасибо. ;-) - person proximus; 22.11.2011

Быстрый и грязный способ сделать так, чтобы колесико мыши работало только тогда, когда виджет находится в фокусе, — это добавить if (!this.focused) return; поверх _mouseWheeled в dijit/form/_Spinner.js.

_mouseWheeled: function(/*Event*/ evt){
    // summary:
    //      Mouse wheel listener where supported
    if (!this.focused) return;
    ...

Однако правильным способом было бы расширить виджет.

// Disable _mouseWheeled when not in focus.
require(
    [
        "dojo/_base/lang"
        , "dojo/_base/event"
        , "dijit/form/_Spinner"
    ]
    , function(
        lang
        , event
        , _Spinner
    ){
        lang.extend(_Spinner, {
            _mouseWheeled: function(/*Event*/ evt){
                // summary:
                //      Mouse wheel listener where supported

                if (!this.focused) return;

                event.stop(evt);
                // FIXME: Safari bubbles

                // be nice to DOH and scroll as much as the event says to
                var wheelDelta = evt.wheelDelta / 120;
                if(Math.floor(wheelDelta) != wheelDelta){
                    // If not an int multiple of 120, then its touchpad scrolling.
                    // This can change very fast so just assume 1 wheel click to make it more manageable.
                    wheelDelta = evt.wheelDelta > 0 ? 1 : -1;
                }
                var scrollAmount = evt.detail ? (evt.detail * -1) : wheelDelta;
                if(scrollAmount !== 0){
                    var node = this[(scrollAmount > 0 ? "upArrowNode" : "downArrowNode" )];

                    this._arrowPressed(node, scrollAmount, this.smallDelta);

                    if(!this._wheelTimer){
                        clearTimeout(this._wheelTimer);
                    }
                    this._wheelTimer = setTimeout(lang.hitch(this,"_arrowReleased",node), 50);
                }
            }
        });
    }
);
person Richard Ayotte    schedule 25.06.2012