Vaadin23 IntegerField如何禁用鼠标滚轮触发值变更？

可以禁用，下面是两种实用的实现方式：

1. 直接给单个IntegerField添加滚轮阻止逻辑 #

在创建IntegerField实例后，通过客户端JavaScript代码阻止滚轮事件的默认行为：

IntegerField numberInput = new IntegerField("数值输入");
// 阻止滚轮触发值变更
numberInput.getElement().executeJs("""
    this.addEventListener('wheel', (e) => {
        e.preventDefault();
        e.stopPropagation();
    }, { passive: false });
""");

这里的关键是设置{ passive: false }，因为需要调用preventDefault()来取消滚轮的默认值变更行为，被动监听器不允许执行这个操作。

2. 自定义可复用的IntegerField组件 #

如果多个地方需要用到无滚轮触发的IntegerField，可以封装成自定义组件：

public class StaticIntegerField extends IntegerField {

    public StaticIntegerField() {
        super();
        disableWheelBehavior();
    }

    public StaticIntegerField(String label) {
        super(label);
        disableWheelBehavior();
    }

    private void disableWheelBehavior() {
        getElement().executeJs("""
            this.addEventListener('wheel', (e) => {
                e.preventDefault();
                e.stopPropagation();
            }, { passive: false });
        """);
    }
}

之后直接使用StaticIntegerField代替原生IntegerField即可，无需重复写阻止逻辑。

内容的提问来源于stack exchange，提问作者alexanoid