事件监听器在移动分辨率下的目标元素之外触发

问题描述 投票：0回答：2

我发现了一个似乎是错误的东西，除非我遗漏了一些东西。我想知道这里是否有人发现类似的事情发生在他们身上以及解决办法是什么。另外，我真的需要排除一些我在这里没有看到的东西，它实际上是一个错误。我在我正在从事的一个项目中发生了这种情况，我完全从头开始创建一个 React 项目，只是为了看看我是否可以复制它，当然我可以。然后继续制作一个带有 div 的简单 .html 文件，错误也发生了。我在这里失去了理智。

<html>
    <head></head>
    <body>
      <div style="width: 300px; height: 300px; border: 1px solid green" 
           onclick="alert('hi')"></div>
    </body>
</html>

在其容器之外稍微单击时会弹出警报:(

我希望仅在单击绿色边框内的区域时才会弹出警报。

html css reactjs browser
2个回答
1
投票

我假设当您说移动分辨率时，您是通过浏览器开发工具的“设备仿真”或实际的手机对其进行测试的。

当您点击触摸屏时，激活的区域并不完全是单个点/像素，而是手指与屏幕接触点周围的小区域。这个区域解释了人类有脂肪并且手指不那么精确的事实。 这甚至在浏览器开发工具中进行了模拟，如下图所示，当我点击与图像相同的位置时，就会触发该事件。

如果这是您所指的“外部”这是预期的并且是可访问性的一个功能

另一个有趣的事情是，当有两个相交的框（如图所示）并且您点击边框时，会触发具有较大触摸区域的框。

0
投票

您需要检查app.css。如果您通过 app.js 调用该组件，代码应该获得一些额外的 css 或跨功能 css。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.