jQuery触发点击事件无法保留设置的pageX与pageY值问题

我帮你分析下问题所在：你手动构造点击事件时，仅仅设置pageX/pageY可能没让事件对象正确携带这些坐标信息，尤其是用jQuery的$.Event时，很容易因为事件对象的属性映射问题导致值为0。下面给你两种可行的解决方案：

方案1：用原生MouseEvent构造函数（更可靠） #

原生的MouseEvent可以直接初始化坐标属性，而且浏览器对它的支持更完善，能确保pageX/pageY被正确识别。示例代码如下：

// 先给目标Canvas绑定点击监听
const canvas = document.querySelector('canvas');
canvas.addEventListener('click', (e) => {
  console.log(e.pageX, e.pageY); // 现在会输出你设置的坐标
});

// 定义你想要传入的目标坐标
const targetX = 150; // 自定义X值
const targetY = 250; // 自定义Y值

// 构造符合标准的点击事件
const clickEvent = new MouseEvent('click', {
  bubbles: true, // 允许事件冒泡，这样window监听也能捕获到
  cancelable: true,
  view: window,
  pageX: targetX,
  pageY: targetY,
  // 如果需要考虑页面滚动，可以补充clientX/Y（pageX = clientX + scrollX）
  clientX: targetX - window.scrollX,
  clientY: targetY - window.scrollY
});

// 在Canvas元素上触发这个事件
canvas.dispatchEvent(clickEvent);

方案2：修正jQuery的事件构造方式 #

如果你习惯用jQuery，需要确保事件对象的坐标属性被正确挂载，最好关联一个原生事件作为originalEvent，这样jQuery的事件包装器才能正确读取坐标：

const $canvas = $('canvas');
$canvas.on('click', (e) => {
  console.log(e.pageX, e.pageY);
});

// 生成随机目标坐标（你可以替换成指定值）
const targetX = Math.random() * window.innerWidth;
const targetY = Math.random() * window.innerHeight;

// 构造带坐标的jQuery事件
const clickEvent = $.Event('click', {
  pageX: targetX,
  pageY: targetY,
  // 关联原生MouseEvent，确保坐标属性有效
  originalEvent: new MouseEvent('click', {
    pageX: targetX,
    pageY: targetY
  })
});

// 在Canvas上触发事件
$canvas.trigger(clickEvent);

额外提醒 #

• 尽量在目标Canvas元素上触发事件，而不是直接触发window的点击。直接触发window的话，事件没有关联具体元素上下文，坐标容易失效。
• 如果你的逻辑需要用到Canvas内部的相对坐标（比如绘制点），可以先用canvas.getBoundingClientRect()计算Canvas的视口偏移，把pageX/Y转换成Canvas内部坐标：

  const rect = canvas.getBoundingClientRect();
  const canvasInnerX = targetX - rect.left;
  const canvasInnerY = targetY - rect.top;
  

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