uni-app 右键点击事件参数丢失 @contextmenu.prevent

uni-app 右键点击事件参数丢失 @contextmenu.prevent

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：


### 预期结果：
```openMenu参数有`clientX``clientY`等```

### 实际结果：
```openMenu参数没有`clientX``clientY``

### bug描述：
uni-admin后台做右键菜单。
右键事件`[@contextmenu](/user/contextmenu).prevent`丢失clientX

更多关于uni-app 右键点击事件参数丢失 @contextmenu.prevent的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

已验证，确实存在
可以用这两个字段   offsetLeft: offsetTop:

更多关于uni-app 右键点击事件参数丢失 @contextmenu.prevent的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这两个字段跟clientX clientY对不上呀

bug 已确认，已加分，预计下版修复

alpha 3.3.7 已修复

在 uni-app 中，[@contextmenu](/user/contextmenu).prevent 确实存在事件参数丢失的问题，尤其是 clientX 和 clientY 等鼠标位置信息。这是因为 uni-app 的事件系统在处理非标准事件时，可能没有完全传递原生事件的所有属性。

解决方案：

  1. 使用 $event 对象：确保在模板中显式传递 $event 对象。

    <div [@contextmenu](/user/contextmenu).prevent="openMenu($event)">右键菜单</div>

  2. 通过原生事件获取位置：在方法中，通过 $event 的原始事件对象（如 $event.changedTouches 或 $event.touches）获取位置信息。

    openMenu(event) {
  // 尝试从不同的事件源获取位置
  let clientX, clientY;
  if (event.touches && event.touches.length > 0) {
    clientX = event.touches[0].clientX;
    clientY = event.touches[0].clientY;
  } else if (event.changedTouches && event.changedTouches.length > 0) {
    clientX = event.changedTouches[0].clientX;
    clientY = event.changedTouches[0].clientY;
  } else {
    // 如果以上都不存在，尝试直接从 event 中获取（可能无效）
    clientX = event.clientX;
    clientY = event.clientY;
  }
  console.log('clientX:', clientX, 'clientY:', clientY);
}
回到顶部