Làm thế nào để tắt các sự kiện mousewheel trên các widget dijit.form.NumberSpinner?

Question

Tôi đang sử dụng một số bộ kẹp tóc dijit.form.NumberSpinner trong ứng dụng dựa trên dojo của mình, tất cả đều được kết nối với các hành động onChange.

Sự cố xảy ra khi một khu vực có nhiều khu vực NumberSpinner s: Người dùng cuộn qua trang và vô tình điền vào các trường NumberSpinner với giá trị ngoài ý muốn trong khi cuộn bằng con lăn chuột trên toàn khu vực.

Bằng cách nào đó, có thể tắt các sự kiện con lăn trên dijit.form.NumberSpinner bộ tóc giả?

Answer 1

Nếu bạn không bao giờ cần đến nó, và nếu bạn có quyền truy cập vào các nguồn võ đường và có khả năng để làm của riêng của bạn xây dựng, bình luận dòng này trên dijit/form/_Spinner.js:

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

Ngoài ra, bạn có thể thiết lập thuộc tính intermediateChanges true trên widget của bạn, và làm điều gì đó như thế này:

Trong html của bạn:

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

Trong khối javascript của bạn:

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

Một cách nhanh chóng và dơ bẩn để có mousewheel chỉ làm việc khi widget có trọng tâm là thêm if (!this.focused) return; lên đỉnh _mouseWheeled trong dijit/form/_Spinner.js.

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

Cách thích hợp là mở rộng tiện ích.

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