移动端分辨率下事件监听器在目标元素外触发问题排查

这不是Bug，是浏览器事件触发机制结合CSS盒模型的正常表现。

为啥会出现这情况 #

默认情况下，元素的onclick事件会覆盖整个盒模型范围——包括内容区、内边距和边框。你写的div用了默认的content-box盒模型，设置的width:300px; height:300px只是内容区的尺寸，算上1px的边框，整个div实际占的空间是302px×302px。你说的“边框外区域”大概率是指那1px的边框本身，它属于div的一部分，所以点击时会触发弹窗。

怎么改成只点内部才触发 #

给你两种可行的方案：

方案1：用内边距模拟边框，给内层内容区绑事件

把盒模型改成border-box，让width/height包含边框和内边距，然后用padding代替border做视觉边框，内层放个真正的内容div，只给内层绑点击事件：

<html>
    <head></head>
    <body>
      <div style="width: 300px; height: 300px; box-sizing: border-box; padding: 1px; background: green">
        <div style="width: 100%; height: 100%; background: white" onclick="alert('hi')"></div>
      </div>
    </body>
</html>

外层的绿色padding看起来就是边框，只有点内层白色区域才会弹alert。

方案2：用坐标判断过滤边框点击

不用改DOM结构，在点击事件里通过坐标判断，只允许内容区的点击触发弹窗：

<html>
    <head></head>
    <body>
      <div style="width: 300px; height: 300px; border: 1px solid green" 
           onclick="handleClick(event)"></div>
      <script>
        function handleClick(e) {
          // 跳过1px的边框区域，只响应内容区点击
          if (e.offsetX > 0 && e.offsetX < 300 && e.offsetY > 0 && e.offsetY < 300) {
            alert('hi');
          }
        }
      </script>
    </body>
</html>

额外提醒 #

要是你真的点击了div完全外面的空白区域还触发弹窗，那可能是浏览器出问题或者测试时点错了位置，按你给的代码正常情况下不会出现这种事，可以检查下有没有其他元素重叠干扰。

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