Browse Source

✨ feat(renderer): 添加鼠标事件拦截调试功能

- 实现鼠标事件拦截器,可捕获click、dblclick等12种鼠标事件
- 重写addEventListener方法包装鼠标事件处理函数
- 输出详细事件信息:事件类型、目标元素标签、类名、ID、坐标位置和时间戳
- 添加控制台日志提示拦截器启用状态
yourname 1 month ago
parent
commit
104b6c1c04
1 changed files with 45 additions and 0 deletions
  1. 45 0
      src/server/renderer.tsx

+ 45 - 0
src/server/renderer.tsx

@@ -128,6 +128,51 @@ export const Rooter = () => {
             console.log('XHR拦截器已启用,将拦截', INTERCEPT_DOMAIN, '的请求并重定向到当前域');
           })();
         `}} />
+        {/* 鼠标事件拦截功能 */}
+        <script dangerouslySetInnerHTML={{ __html: `
+          // 鼠标事件拦截功能
+          (function() {
+            // 定义要拦截的鼠标事件类型
+            const mouseEvents = [
+              'click', 'dblclick', 'mousedown', 'mouseup', 'mousemove',
+              'mouseover', 'mouseout', 'mouseenter', 'mouseleave',
+              'contextmenu', 'wheel'
+            ];
+
+            // 保存原始的事件监听器添加方法
+            const originalAddEventListener = EventTarget.prototype.addEventListener;
+
+            // 重写addEventListener方法
+            EventTarget.prototype.addEventListener = function(type, listener, options) {
+              // 如果是鼠标事件,包装监听器
+              if (mouseEvents.includes(type)) {
+                const wrappedListener = function(event) {
+                  // 使用console.debug输出鼠标事件信息
+                  console.debug('鼠标事件拦截:', {
+                    type: event.type,
+                    target: event.target?.tagName || 'unknown',
+                    className: event.target?.className || 'none',
+                    id: event.target?.id || 'none',
+                    x: event.clientX,
+                    y: event.clientY,
+                    timestamp: Date.now()
+                  });
+
+                  // 调用原始监听器
+                  return listener.call(this, event);
+                };
+
+                // 使用原始方法添加包装后的监听器
+                return originalAddEventListener.call(this, type, wrappedListener, options);
+              }
+
+              // 对于非鼠标事件,直接使用原始方法
+              return originalAddEventListener.call(this, type, listener, options);
+            };
+
+            console.log('鼠标事件拦截器已启用,将拦截所有鼠标事件并输出到console.debug');
+          })();
+        `}} />
         <script dangerouslySetInnerHTML={{ __html: `
           // 页面加载时将数据写入会话存储
           window.addEventListener('DOMContentLoaded', () => {