Ionic 模态框打开时硬件返回按钮ionBackButton事件监听器不执行问题

问题原因 #

Ionic 中所有悬浮层类组件（模态框、弹出层、动作面板等）内部默认注册了优先级为100的硬件返回按钮监听器，你自定义注册的监听器优先级仅为10，低于默认优先级，所以模态框打开时你的监听器会被拦截，不会触发。

解决方案 #

方案1：使用IonModal自带的返回按钮回调（推荐） #

直接给IonModal组件添加onBackButtonTap属性，自定义按下返回键的逻辑，不需要额外注册全局事件：

import React, { useState } from 'react';
import { IonModal, IonButton, IonContent } from '@ionic/react';

export const ModalExample: React.FC = () => {
  const [showModal, setShowModal] = useState(false);

  const handleModalBack = () => {
    // 此处写自定义返回逻辑，示例为先打印日志再关闭模态框
    console.log('模态框打开时按下返回按钮，Handler被调用！');
    setShowModal(false);
  };

  return (
    <IonContent>
      <IonModal 
        isOpen={showModal} 
        cssClass='my-custom-class'
        onBackButtonTap={handleModalBack}
      >
        <p>This is modal content</p>
        <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
      </IonModal>
      <IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
    </IonContent>
  );
};

方案2：调高全局返回监听器优先级 #

如果需要全局统一处理所有场景的返回逻辑，将你注册监听器的优先级调整到高于100即可，比如设为101：

document.addEventListener('ionBackButton', (ev) => {
   // 优先级设为101，高于模态框默认的100，会优先执行
   ev.detail.register(101, (processNextHandler) => {
     console.log('Handler was called!');
     // 如果需要保留Ionic默认的返回行为（比如自动关闭模态框），调用此方法向下传递事件
     // 不需要默认行为可以省略该调用
     processNextHandler();
   });
});

内容的提问来源于stack exchange，提问作者Uddip Acharjee Shuvo