Question

我在表单中使用dijit.form.NumberSpinner()窗口小部件来查找索引内容。这在大多数情况下都很有用 - 使用箭头键输入数字，并使用微调器按钮都以正确的方式响应。但是，在某些浏览器（特别是Firefox）上，使用字段上的滚轮会增加值＆gt; 1。

有没有办法强制所有浏览器在这样的数字字段上滚动增量为1？对于我的应用程序来说，+ 3 / -3的行为是非常不受欢迎的，因为随着值的更新，结果会实时滚动。

我已经在使用从NumberSpinner派生的自定义小部件，因此如果需要的话，添加或覆盖属性应该不难，我只是不知道要改变什么。 docs only say the increment should be 1 for arrow keys，他们没有说滚动。

Answer 1

那是因为它取决于事件本身提供的内容（=由浏览器提供）。目前，它使用 mousewheel 事件中的evt.wheelDelta或evt.detail属性来确定增量值。但是，目前还没有标准，大多数实现都使用某些功能来规范化滚动速度。

如果您在Firefox中使用以下代码：

require(["dojo/ready", "dojo/mouse", "dojo/on", "dijit/registry", "dijit/form/NumberSpinner", "dojo/parser"], function(ready, mouse, on, registry) {
    ready(function() {
        on(registry.byId("mySpinner").domNode, mouse.wheel, function(evt) {
            console.log(evt.detail);
        });
    });
});

在Firefox中执行时，它会显示此值为3或-3。

如果您真的不希望它依赖于浏览器所说的内容，您可以覆盖_mouseWheeled功能：

FixedNumberSpinner = declare("dijit/form/FixedNumberSpinner", [ NumberSpinner ], {
    _mouseWheeled: function(/*Event*/ evt){
        evt.stopPropagation();
        evt.preventDefault();
        var wheelDelta = evt.wheelDelta > 0 ? 1 : -1;
        var detailDelta = evt.detail > 0 ? -1 : 1;
        var scrollAmount = evt.detail ? detailDelta : wheelDelta;
        if(scrollAmount !== 0){
            var node = this[(scrollAmount > 0 ? "upArrowNode" : "downArrowNode" )];
            this._arrowPressed(node, scrollAmount, this.smallDelta);
            if(this._wheelTimer){
                this._wheelTimer.remove();
            }
            this._wheelTimer = this.defer(function(){
                this._arrowReleased(node);
            }, 50);
        }
    }
});

但请记住，在不久的将来，实施可能仍会改变，所以我个人只会坚持增加3.

可以在JSFiddle上找到完整的示例：http://jsfiddle.net/4ZQTY/5/

编辑：正如评论中所提到的，更简单的解决方案是覆盖adjust()函数。

Answer 2

在大多数情况下，最好只留下这些小部件的行为。由于股票输入小部件以相同的方式响应，因此每个浏览器的用户都会熟悉所采用的鼠标滚轮操作。

如果超越这一点确实有意义，您可以调整dijit小部件的adjust()方法。如果要强制窗口小部件逐步执行每个中间值，无论是否请求大小调整，都可以强制增量值为1，然后继续执行原始函数的内容。

    adjust: function (val, delta) {
        delta = delta > 0 ? 1 : -1;
        return this.inherited(arguments);
    }

（jsfiddle）

感谢Dimitri M's answer让我参与狩猎，但我发现覆盖adjust()中的值比重新定义_mouseWheeled()更简单。

我可以强制滚动dijit.form.NumberSpinner的增量值吗？

2 个答案: