dijit.form.NumberSpinnerウィジェットでマウスイベントを無効にするにはどうすればよいですか？

Question

私はdojoベースのアプリケーションでdijit.form.NumberSpinner wigetsを使用していますが、それらのすべてがonChangeアクションに接続されています。

NumberSpinnerが多い領域がある場合に問題が発生します。ユーザーは、ページ全体をスクロールして、間違ってフィールドを意図しない値で塗りつぶして、マウスホイール全体をスクロールします。

マウスホイールのイベントを無効にすることは可能でしょうかdijit.form.NumberSpinner wigets？

Answer 1

あなたはそれを必要としない、とあなたは道場・ソースへのアクセスを持っているし、構築し、独自の操作を行うことができれば、dijitの/フォーム/上でこの行をコメント決して場合_Spinner.js：また

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

、あなたあなたのウィジェットをtrueにintermediateChangesプロパティを設定し、このような何か行うことができます：あなたのjavascriptブロックで

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

：あなたのHTML内

を

をウィジェットにフォーカスがあるときにマウスホイールが唯一の仕事持っている

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

迅速かつ汚い方法がdijit/form/_Spinner.jsに_mouseWheeledのトップにif (!this.focused) return;を追加することです。

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