JavaScript：事件侦听器函数无法识别屏幕上某个点过去的事件答案

【问题标题】：JavaScript: Event Listener Function Not Recognizing an Event Past Certain Point on ScreenJavaScript：事件侦听器函数无法识别屏幕上某个点过去的事件
【发布时间】：2021-05-25 00:35:28
【问题描述】：

我有一个内置 JavaScript 的游戏，您可以在其中将硬币从龙下方拖入金库以得分。

参考游戏：https://codeeverydamnday.com/projects/dragondrop/dragondrop.html

只有在金库范围内投下硬币才能获得积分。保险库边界在这些绝对位置内：

保险库左边缘：距屏幕左侧 645 像素
保险库的右边缘：距屏幕左侧 915 像素
保险库顶部边缘：距屏幕顶部边缘 290 像素
保险库底部边缘：距屏幕顶部边缘 540 像素

在你投掷硬币时运行的函数中，我有一个“if”语句，仅当你投掷的硬币具有落在保险库边界内的新 xy 坐标时才将你的分数加起来（仅显示相关代码，可以提供如果需要更多）：

function moveDrop(e) {
  e.preventDefault ();
  coin.style.left = e.pageX - myX + 'px';
  coin.style.top = e.pageY - myY + 'px';
    // myX and myY are the coin's original x-y coordinates. This line resets their new x-y coordinates after the drop
    if (
      coin.style.left > "645" && 
      coin.style.left < "915" && 
      coin.style.top > "290" && 
      coin.style.top < "540") {
        // Function that adds your score each time you drop a coin in the vault
    }
}

上面的函数按原样完美运行。老实说我不知道怎么做，因为coin.style.left 会有一个像700px 这样的值，我要求它检查它是否大于645（没有像素），但它可以工作。

但是，我试图简单地将 Vault 向右移动 200 像素，以便其新的 x 坐标边界为距屏幕左侧 845 到 1115 像素（而不是 645 和 915）。

当我将保险库图像的绝对位置更新为 845 像素时，它移动得很好。当我在上面的 if 语句中将 coin.style.left > "645" 更新为 coin.style.left > "845" 时，它工作正常。

但是，当我将 coin.style.left < "915" 更新为 coin.style.left < "1115" 时，我可以将一枚硬币拖到金库中，但下降监听器没有识别出硬币已落在金库范围内，因此不会累加你的分数.

我做了一些测试，结果证明它可以工作，直到我将左边缘属性更改为coin.style.left < "999"。一旦我将其更改为1000 或更多，它就会中断。我不确定这是否与数字 1000 本身有关，或者它现在是 4 个字符而不是 3 个字符。

movedrop 事件处理程序正在侦听body 元素上的操作，所以我认为文档正文可能只有 1000 像素。但是，我在 css 中将其设置为 1200px。

body {
  width: 1200px;
  height: 650px;
}

我尝试使用 Chrome 开发工具检查元素，看看在 1000 像素之后是否有一些隐藏的边距。我什么都看不见。有一个右边距，但只有超过 1200 像素。

我在 index.html、style.css 和 script.js 文件中到处搜索“1000”，看看是否有其他设置为 1000，但什么也没有。有什么我遗漏的东西可能会阻止该功能正常运行超过 1000 像素吗？

如果需要，我可以提供完整的代码。

【问题讨论】：

您可以提供minimal reproducible example，而不是提供完整代码吗？也许我们可以在 JSBin 或 JSFiddle 中运行一些东西？
我会换个方向，让我的游戏在 1000px 上运行。

标签： javascript events drag-and-drop event-handling

【解决方案1】：

我找到了问题的答案。我试图比较两个字符串值而不是两个数值。

例如，在下面的代码中（从上面的描述中缩短为相关代码），coin.style.left 的值最终可能类似于 "760px"。

function moveDrop(e) {
  coin.style.left = e.pageX - myX + 'px';
  if (
    coin.style.left > "645" {
      // Do some stuff
  }
}

然后，在 if 语句中，我询问“760px”是否大于“645”。因为我在值周围使用引号，所以我比较的是字符串而不是数字。我还不如问“狗”是否大于“椅子”。该函数并不确切知道如何处理。

我首先通过使用以下子字符串方法将coin.style.left 值转换为后面没有“px”的数字来解决此问题：

function moveDrop(e) {
  coin.style.left = e.pageX - myX + 'px';
  var finalLeft = coin.style.left.substr(0, coin.style.left.length-2);
  if (
    finalLeft > 645 {
      // Do some stuff
  }
}

变量finalLeft 取来自coin.style.left 的值，比如“760px”，找到字符串的长度（在本例中为5），然后从末尾减去2 个字符，只剩下“760”。然后，if 语句可以比较 760 是否大于 645。

进行此更新后，我能够成功地将宽度增加到 1200 像素，而不会出现问题。

【讨论】：