¿Cómo deshabilitar los eventos de mouse en los widgets dijit.form.NumberSpinner?

Question

Estoy usando algunos wigets dijit.form.NumberSpinner en mi aplicación basada en dojo, todos ellos están conectados a acciones onChange.

Ocurre un problema cuando uno tiene un área con muchos NumberSpinner s: los usuarios se desplazan por la página y accidentalmente llenan los campos NumberSpinner con valores involuntarios mientras se desplazan con la rueda del mouse por toda el área.

¿Es de alguna manera posible desactivar eventos mousewheel en dijit.form.NumberSpinner wigets?

Answer 1

Si nunca lo necesite, y si usted tiene acceso a las fuentes de Dojo y es capaz de hacer su propia construye, comentar esta línea de dijit/forma/_Spinner.js:

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

alternativa, puede establecer la propiedad intermediateChanges true en el widget, y hacer algo como esto:

en el código 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'"/> 

en su bloque 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); 
    }); 

}); 

Answer 2

Una manera rápida y sucia para que la rueda del ratón solamente funciona cuando el control tiene el foco es agregar if (!this.focused) return; a la parte superior de _mouseWheeled en dijit/form/_Spinner.js.

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

Sin embargo, la forma correcta sería ampliar el widget.

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