如何在DOM事件回调执行前修改事件对象且兼容两种绑定方式？

我用两种方式给按钮绑定点击事件：

1. 内联属性绑定：

<body>
  <button onclick="myFunction()">CLICK</button>
  <script>
    function myFunction(event) {
      // 根据事件属性做处理
    }
  </script>
</body>

2. addEventListener绑定：

<body>
  <button id="myButton">CLICK</button>
  <script>
    var button = document.getElementById("myButton");
    button.addEventListener("click", myFunction);
    function myFunction(event) {
      // 根据事件属性做处理
    }
  </script>
</body>

由于body元素添加了scale、width样式，导致鼠标/指针类事件（如MouseEvent、PointerEvent）的坐标计算异常，现在需要不修改原回调myFunction，实现无感知的事件属性修正：

• 能否通过修改addEventListener的原型实现全局修正？
• 内联onclick这类绑定方式如何处理？

1. 劫持addEventListener实现全局事件修正 #

通过重写EventTarget.prototype.addEventListener，拦截所有事件绑定逻辑，包装原回调函数，在执行原回调前修改事件对象的坐标属性。

// 保存原生addEventListener方法
const originalAddEventListener = EventTarget.prototype.addEventListener;

// 重写addEventListener
EventTarget.prototype.addEventListener = function(type, listener, options) {
  // 定义需要修正坐标的事件类型
  const targetEvents = ['click', 'mousedown', 'mouseup', 'mousemove', 'pointerdown', 'pointerup', 'pointermove', 'dragstart', 'drag', 'dragend'];
  
  if (targetEvents.includes(type)) {
    // 包装原回调
    const wrappedListener = function(event) {
      // 示例：根据scale比例修正坐标，这里的系数可根据实际样式动态计算
      const fixRatio = 1.5;
      
      // 事件属性为只读，需用Object.defineProperty修改
      Object.defineProperty(event, 'clientX', { value: event.clientX * fixRatio });
      Object.defineProperty(event, 'clientY', { value: event.clientY * fixRatio });
      Object.defineProperty(event, 'pageX', { value: event.pageX * fixRatio });
      Object.defineProperty(event, 'pageY', { value: event.pageY * fixRatio });
      
      // 执行原回调
      return listener.apply(this, arguments);
    };
    
    return originalAddEventListener.call(this, type, wrappedListener, options);
  } else {
    // 非目标事件直接调用原生方法
    return originalAddEventListener.call(this, type, listener, options);
  }
};

2. 处理内联onxxx属性绑定 #

内联事件本质是元素的onxxx属性，通过重写HTMLElement.prototype对应属性的setter，拦截内联事件的绑定并包装回调。

// 定义需要处理的内联事件类型
const inlineEventNames = ['onclick', 'onmousedown', 'onmouseup', 'onmousemove', 'onpointerdown', 'onpointerup', 'onpointermove', 'ondragstart', 'ondrag', 'ondragend'];

inlineEventNames.forEach(eventName => {
  const originalDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, eventName);
  
  // 重写setter
  Object.defineProperty(HTMLElement.prototype, eventName, {
    set: function(value) {
      let wrappedFn;
      
      if (typeof value === 'function') {
        // 处理直接赋值的函数
        wrappedFn = function(event) {
          const fixRatio = 1.5;
          Object.defineProperty(event, 'clientX', { value: event.clientX * fixRatio });
          Object.defineProperty(event, 'clientY', { value: event.clientY * fixRatio });
          Object.defineProperty(event, 'pageX', { value: event.pageX * fixRatio });
          Object.defineProperty(event, 'pageY', { value: event.pageY * fixRatio });
          
          return value.apply(this, arguments);
        };
      } else if (typeof value === 'string') {
        // 处理内联字符串形式的事件（如"myFunction()"）
        const originalFn = new Function('event', value);
        wrappedFn = function(event) {
          const fixRatio = 1.5;
          Object.defineProperty(event, 'clientX', { value: event.clientX * fixRatio });
          Object.defineProperty(event, 'clientY', { value: event.clientY * fixRatio });
          Object.defineProperty(event, 'pageX', { value: event.pageX * fixRatio });
          Object.defineProperty(event, 'pageY', { value: event.pageY * fixRatio });
          
          return originalFn.apply(this, arguments);
        };
      } else {
        wrappedFn = value;
      }
      
      // 调用原生setter设置包装后的函数
      originalDescriptor.set.call(this, wrappedFn);
    },
    get: originalDescriptor.get,
    configurable: true,
    enumerable: true
  });
});

关键注意事项 #

• 事件对象的属性默认是只读的，必须使用Object.defineProperty修改值，直接赋值无效。
• 修正系数可根据body的实际样式动态计算，比如通过getComputedStyle(document.body)获取transform的scale值，反向推导修正比例。
• 重写原型方法时，仅针对目标事件类型处理，避免影响其他不相关事件的正常执行。

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