Android WebView 移除焦点：图形页加载后tooltip hover状态无法随外部点击消失

核心问题原因 #

安卓WebView内部的DOM元素hover状态，由自身的触摸事件机制独立维护，和原生View的焦点传递逻辑完全脱节：

• 用户触摸过WebView内的柱状图li元素后，WebView会默认把该元素的hover状态保留，直到WebView内部触发新的触摸交互
• 用户点击WebView外部的Button、EditText等原生控件时，WebView完全感知不到外部的交互行为，不会自动清除内部残留的hover状态，最终导致绑定在hover状态上的tooltip一直卡在界面上
• 这也是为什么翻遍WebView焦点控制相关的资料都没找到解法——常规的WebView焦点设置API，只能控制WebView整体能不能获得输入焦点，根本无法直接影响WebView内部的DOM元素状态。

可行的落地方案 #

方案1：原生层监听全局焦点变化，联动JS清除残留hover（零侵入网页代码） #

不需要修改原有网页的CSS和JS逻辑，在原生层监听全局控件的焦点变化，一旦发现焦点离开WebView，立刻注入JS清除所有tooltip和hover状态：

1. WebView初始化完成后，给根布局注册全局焦点变化监听：

   // 替换为项目中实际使用的根布局实例
   View rootView = getWindow().getDecorView();
   rootView.getViewTreeObserver().addOnGlobalFocusChangeListener((oldFocus, newFocus) -> {
       // 当当前聚焦的控件不是WebView时，执行清除逻辑
       if (newFocus != graph) {
           graph.evaluateJavascript(
               // 清除所有处于hover状态的li元素的焦点
               "document.querySelectorAll('#graph li:hover').forEach(el => el.blur());" +
               // 强制隐藏所有tooltip
               "document.querySelectorAll('.tooltip').forEach(tip => tip.style.display = 'none');",
               null
           );
       }
   });
   

2. 方案优势：覆盖所有外部交互场景，不管是点击按钮、输入框、还是页面空白区域，只要焦点离开WebView就立刻清理卡滞的tooltip，完全不需要改动原有网页的业务逻辑。

方案2：优化网页交互逻辑，从根源替换纯CSS的hover触发逻辑 #

移动端场景本身没有桌面端的鼠标悬浮概念，原代码里完全依赖CSSli:hover触发tooltip的逻辑，本来就不适配移动端触摸交互，可以直接改成JS触摸事件控制tooltip显示：

1. 删掉原CSS中纯依赖hover的tooltip显示规则：

   /* 删除原有hover触发tooltip的规则，不再用纯CSS控制tooltip显示
   #graph li:hover .tooltip {
       display: block;
       opacity: 1 !important;
   }
   */
   

2. 新增JS逻辑绑定触摸事件，手动控制tooltip的显示隐藏：

   // 给每个柱状图元素绑定触摸开始事件
   document.querySelectorAll('#graph li').forEach(item => {
       item.addEventListener('touchstart', (e) => {
           // 阻止事件冒泡，避免触发body的全局隐藏逻辑
           e.stopPropagation();
           // 先隐藏页面上所有已显示的tooltip
           document.querySelectorAll('.tooltip').forEach(tip => tip.style.display = 'none');
           // 显示当前触摸的柱状图对应的tooltip
           item.querySelector('.tooltip').style.display = 'block';
       });
   });
   // 给页面body绑定全局触摸事件
   document.body.addEventListener('touchstart', () => {
       // 只要触摸位置不是柱状图元素，就隐藏所有tooltip
       document.querySelectorAll('.tooltip').forEach(tip => tip.style.display = 'none');
   });
   

3. 方案优势：从根源上消除了WebView hover状态残留的问题，交互逻辑完全符合移动端用户的使用习惯，不需要依赖原生层的事件联动。

方案3：重写WebView的焦点变化回调，主动重置内部状态 #

可以通过自定义WebView控件，在WebView本身失去原生焦点时，主动触发内部DOM元素的状态重置：

WebView graph = new WebView(this) {
    @Override
    protected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) {
        super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
        // 当WebView失去焦点时，清除内部所有DOM元素的激活状态
        if (!gainFocus) {
            evaluateJavascript("document.activeElement?.blur();", null);
        }
    }
};

注意事项 #

• 注入JS前需要确保WebView的JS开关已经打开，即初始化时需要调用graph.getSettings().setJavaScriptEnabled(true)
• 如果加载的是外部跨域页面，需要根据WebView的版本对应配置跨域访问权限，避免JS注入失败

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