如何让获取Canvas点击坐标的函数仅响应右键点击？

没问题，要让你的函数只响应右键点击其实很容易，我们只需要利用鼠标事件对象的button属性来做判断，再加上一点小处理阻止浏览器默认的右键菜单就可以了。

修改后的完整代码 #

canvas.addEventListener("mousedown", getPosition, false);

function getPosition(event) {
    // 判断是否为右键点击（标准DOM中右键对应的button值是2）
    if (event.button === 2) {
        // 阻止浏览器默认的右键菜单弹出
        event.preventDefault();
        
        var x = event.x;
        var y = event.y;
        var canvas = document.getElementById("canvas");
        x -= canvas.offsetLeft;
        y -= canvas.offsetTop;
        alert("x:" + x + " y:" + y);
    }
}

关键改动说明 #

• 右键判断逻辑：通过event.button === 2来筛选右键点击，这里的数值对应关系是：
  • 0：左键点击
  • 1：中键（滚轮）点击
  • 2：右键点击
• 阻止默认行为：添加event.preventDefault()是为了避免浏览器弹出默认的右键菜单，让我们的自定义逻辑成为右键点击的唯一响应行为，提升用户体验。

这样修改后，你的函数就只会在用户右键点击canvas时触发坐标获取和弹窗提示啦。

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