JavaScript条件判断语法失效，Canvas指定矩形区域点击事件异常

你当前的条件判断失效，核心原因是JavaScript不支持数学表达式里的连续比较语法。
你写的0 <= this.mousePos.x <300、100 <= this.mousePos.y <110这类链式写法，会按照从左到右的顺序逐段执行，完全不符合数学上“判断值落在两个边界之间”的预期：

1. 先计算最左侧的比较结果，返回值是布尔类型（true/false）
2. 再将这个布尔值隐式转换为数字（true转1，false转0），用转换后的数字和后面的边界值做比较

这种执行逻辑下，不管实际鼠标坐标是多少，整段判断永远会返回true：

• 当x=500（远大于300）时：0 <=500结果为true（转数值为1），接着判断1 <300结果为true
• 当x=-100（远小于0）时：0 <=-100结果为false（转数值为0），接着判断0 <300结果为true
• 当y=50（远小于100）、y=200（远大于110）时，代入链式判断的结果也全部为true

这就导致只要触发canvas的click事件，判断逻辑就会执行“mouseClicked”的日志输出，完全达不到限定点击范围的效果。

将链式比较拆分为独立的判断条件，用逻辑与运算符&&连接，确保每个坐标维度的上下边界都做单独校验：

canvas.addEventListener("click", e => {
  let rect = canvas.getBoundingClientRect();
  this.mousePos = {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
  console.log(this.mousePos.x, this.mousePos.y);

  // 修正后的矩形范围判断
  if(
    this.mousePos.x >= 0 && 
    this.mousePos.x < 300 && 
    this.mousePos.y >= 100 && 
    this.mousePos.y < 110
  ) {
    console.log("mouseClicked");
  }
});

可选优化 #

如果后续需要频繁调整目标矩形的位置、尺寸，可以把矩形参数抽离为独立配置，避免硬编码数字带来的维护成本：

• 预先定义目标区域参数

const targetArea = {
  left: 0,
  top: 100,
  width: 300,
  height: 10
};

• 点击判断时基于配置计算边界：

const isClickInTarget = 
  this.mousePos.x >= targetArea.left &&
  this.mousePos.x <= targetArea.left + targetArea.width &&
  this.mousePos.y >= targetArea.top &&
  this.mousePos.y <= targetArea.top + targetArea.height;

if (isClickInTarget) {
  console.log("mouseClicked");
}

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