时间戳

首页 > 解决方案 > 如何向 JavaScript MouseEvent 添加附加信息，例如 relativeClientX 属性？

javascript - 如何向 JavaScript MouseEvent 添加附加信息，例如 relativeClientX 属性？

问题描述

有时我可能需要clientXand clientY，MouseEvent这样MouseEvent就足够了。但其他时候，我可能需要clientRelativeX并使用以下clientRelativeY方法计算getBoundingClientRect()：

/**
 * @param {function(MouseEvent, HTMLElement): void} onMouseMove
 * @param {HTMLElement} [document] targetElement
 */
export const registerMouseMoveHandler = (onMouseMove, targetElement = document) => {
  targetElement.addEventListener('mousemove', e => {
    const {
      left: leftOffset,
      top: topOffset,
    } = targetElement.getBoundingClientRect();

    const clientRelativeX = e.clientX - Math.floor(leftOffset);
    const clientRelativeY = e.clientY - Math.floor(topOffset);

    // Maybe e.clientRelativeX = clientRelativeX;
    // Maybe e.clientRelativeY = clientRelativeY;
    
    onMouseMove(e, targetElement);
  });
};

所以我的问题是：我应该直接将属性添加到MouseEvent? 所有主要浏览器都支持还是这样做的非标准方式？另一种可能性是CustomEvent具有 originalEvent 属性。

标签： javascript

解决方案

推荐阅读