改变【避免被动hover导致朗读】的实现方案

web/README.md

@@ -31,7 +31,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ### 要避免的行为
 * 点击导致的focus，不可有反应。（记录点击行为的最后一次时间，此后极短时间内focus事件里不朗读，且如果focus到了页面特殊区域（页面结构元素），还要取消focus。）
-* 页面更新导致被动hover到元素，不可有反应。（不能用上一次mousemove事件的时间来判断是否要响应hover事件，因为mousemove到按钮上马上点击，也可能导致被动hover。正确做法是根据页面最后一次更新的时间来判断是否要响应hover事件。判断页面更新：用mutation observer观察document.body）
+* 页面更新导致被动hover到元素，不可有反应。（不能用上一次mousemove事件的时间来判断是否要响应hover事件，因为mousemove到按钮上马上点击，也可能导致被动hover。只好在keydown.enter事件以及mousedown事件刚发生后忽略hover事件。）
 
 ### 竞争情况（不考虑极端操作时偶尔的竞争。）
 * 1与2：不会竞争

web/src/views/accessibility.vue

@@ -477,9 +477,8 @@ export default {
       interactionAreaNum: null,
 
       // 为了避免多余的朗读行为
-      isJustMouseDown: false,
-      domChangeLastTime: null,
-      mutationObserver: null,
+      mouseDownLastTime: null,
+      keyEnterLastTime: null,
       requestReadLastTime: null,
       isJustWindowFocus: false,
     }
@@ -680,13 +679,6 @@ export default {
         }
       }
     })
-
-    const config = { attributes: true, childList: true, subtree: true };
-    const callback = (mutationsList, observer) => {
-      this.domChangeLastTime = Date.now()
-    };
-    this.mutationObserver = new MutationObserver(callback);
-    this.mutationObserver.observe(document.body, config);
   },
   mounted() {
   },
@@ -721,7 +713,6 @@ export default {
     this.$eventBus.$off('request-process-text-element')
     this.$eventBus.$off('request-process-image-element')
     
-    this.mutationObserver.disconnect();
   },
   methods: {
     onWindowFocus() {
@@ -738,10 +729,7 @@ export default {
       }
     },
     onMouseDown() {
-      this.isJustMouseDown = true
-      setTimeout(() => {
-        this.isJustMouseDown = false
-      }, 0);
+      this.mouseDownLastTime = Date.now()
     },
     planToPlayAudio(taskId, text = '') {
       let XHR = new XMLHttpRequest()
@@ -784,6 +772,9 @@ export default {
       if (e.repeat) {
         return
       }
+      if (e.key === 'Enter') {
+        this.keyEnterLastTime = Date.now()
+      }
       if (e.key === "?" && !e.altKey && !e.ctrlKey && e.shiftKey) {
         if (this.ariaSettings.isCompActive) {
           this.onClickHelp()
@@ -904,11 +895,15 @@ export default {
         return
       }
       const curTime = Date.now()
-      if (curTime - this.domChangeLastTime <= 500 + 100) {
-        console.log('DOM刚改变，忽略hover。');
+      if (curTime - this.mouseDownLastTime <= 500 + 200) {
+        console.log('刚发生mousedown，忽略hover。');
         return
       }
-      if (curTime - this.requestReadLastTime <= 500 + 100) {
+      if (curTime - this.keyEnterLastTime <= 500 + 200) {
+        console.log('刚发生mousedown，忽略hover。');
+        return
+      }
+      if (curTime - this.requestReadLastTime <= 500 + 200) {
         console.log('刚被要求朗读，忽略hover。');
         return
       }
@@ -925,11 +920,15 @@ export default {
         return
       }
       const curTime = Date.now()
-      if (curTime - this.domChangeLastTime <= 100) {
-        console.log('DOM刚改变，忽略hover。');
+      if (curTime - this.domChangeLastTime <= 200) {
+        console.log('刚发生mousedown，忽略hover。');
+        return
+      }
+      if (curTime - this.keyEnterLastTime <= 200) {
+        console.log('刚发生mousedown，忽略hover。');
         return
       }
-      if (curTime - this.requestReadLastTime <= 100) {
+      if (curTime - this.requestReadLastTime <= 200) {
         console.log('刚被要求朗读，忽略hover。');
         return
       }
@@ -978,7 +977,8 @@ export default {
         return
       }
       // 如果是点击鼠标引起的focus
-      if (this.isJustMouseDown) {
+      const curTime = Date.now()
+      if (curTime - this.mouseDownLastTime < 200) {
         if (
           document.activeElement.dataset.ariaNavigationArea !== undefined ||
           document.activeElement.dataset.ariaViewportArea !== undefined ||