ExtJS 7.5.1 Android端按钮tap/click监听失效（关联无障碍功能）

问题分析 #

当Android设备开启TalkBack无障碍功能时，系统会拦截原生触摸事件并转换为辅助功能焦点交互，ExtJS默认的tap/click/doubleTap事件绑定逻辑在这种场景下无法正确捕获事件；而iOS的VoiceOver对事件处理的兼容性更好，因此未出现该问题。

修复方案 #

针对ExtJS 7.5.1 modern工具包（Triton主题），可通过以下几种方式解决：

1. 绑定无障碍专用action事件 #

ExtJS为无障碍场景提供了统一的action事件，可自动适配iOS VoiceOver和Android TalkBack的交互逻辑：

Ext.create('Ext.Button', {
    text: '测试按钮',
    listeners: {
        action: function(btn) {
            console.log('按钮交互触发');
            // 执行业务逻辑
        }
    },
    renderTo: Ext.getBody()
});

2. 配置touchAction强制捕获触摸事件 #

通过设置按钮的touchAction属性，避免浏览器将触摸事件拦截为默认行为，确保ExtJS能正常捕获tap/doubleTap事件：

Ext.create('Ext.Button', {
    text: '测试按钮',
    touchAction: {
        panY: false
    },
    listeners: {
        tap: function(btn) {
            console.log('Tap事件触发');
        },
        doubleTap: function(btn) {
            console.log('DoubleTap事件触发');
        }
    },
    renderTo: Ext.getBody()
});

3. 监听原生DOM的click事件 #

TalkBack最终会触发原生DOM的click事件，可直接监听按钮的原生元素绕开组件层的事件拦截：

Ext.create('Ext.Button', {
    text: '测试按钮',
    listeners: {
        element: 'element',
        click: function(e) {
            e.stopPropagation();
            console.log('原生Click事件触发');
            // 执行业务逻辑
        }
    },
    renderTo: Ext.getBody()
});

验证建议 #

• 测试时确保Android设备TalkBack已开启，且按钮获得无障碍焦点
• 可通过全局配置确保应用无障碍模式正常：

Ext.Viewport.setConfig({
    accessibility: {
        enabled: true
    }
});

内容的提问来源于stack exchange，提问作者Caio Diógenes