Jak wyłączyć zdarzenia kółka myszy w widżetach dijit.form.NumberSpinner?

Question

Używam niektórych wigetek dijit.form.NumberSpinner w mojej aplikacji opartej na dojo, wszystkie są połączone z działaniami onChange.

Problem pojawia się, gdy mamy obszar z dużą liczbą NumberSpinner s: Użytkownicy przewijają strony i przypadkowo wypełniają pola NumberSpinner z niezamierzonymi wartościami podczas przewijania za pomocą kółka myszy na całym obszarze.

Czy można w jakiś sposób wyłączyć zdarzenia kółka myszy na wigetach dijit.form.NumberSpinner?

Answer 1

Jeśli nie jest to potrzebne, a jeśli masz dostęp do źródeł dojo i są w stanie zrobić własne buduje, skomentować tę linię na dijit/postaci/_Spinner.js:

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

Alternatywnie, ty można ustawić właściwość intermediateChanges true na widget, a zrobić coś takiego:

w 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'"/> 

w waszym Javascript bloku:

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

}); 

Answer 2

Szybki i brudny sposób mieć kółka myszy działa tylko wtedy, gdy widget ma ostrości jest dodanie if (!this.focused) return; na górę _mouseWheeled w dijit/form/_Spinner.js.

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

Właściwym sposobem byłoby jednak rozszerzenie widgetu.

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